Chạy javascript sau khi trang được hiển thị hoàn toàn

Question

Tôi đang cố gắng tạo tập lệnh highlighter cú pháp. Tôi đã thử sử dụng tập lệnh của mình trên một mã có 10 nghìn dòng và tất cả những gì tôi thấy là một trang trống trong khi đang tải. Tất cả mọi thứ sẽ chỉ hiển thị sau khi kịch bản đã hoàn thành nhiệm vụ của nó. Nhân tiện, tôi gọi kịch bản của tôi bên trong hàm sẵn sàng của jQuery.

$(myFunction); 

Tập lệnh sẽ thực thi sau khi trang được hiển thị hoàn toàn và người dùng thực sự có thể điều hướng qua trang ngay cả khi tập lệnh chưa hoàn tất. JavaScript sẽ chạy ở chế độ nền vì nó làm nổi bật từng mã một trong khi không can thiệp vào sự lặp lại của trang. Cảm ơn trước.

EDIT:

Để làm điều này rõ ràng hơn, tôi muốn thực thi mã sau khi mọi thứ được "trả lại" không "tải". Mọi thứ đã hiển thị trên màn hình và người dùng thực sự có thể nhìn thấy mã đang hoạt động vì nó đang được tô sáng. Cảm ơn.

Answer 1

Ý của bạn là sau khi tất cả các hình ảnh đã được tải?

Tôi nghĩ window.onload là những gì bạn đang tìm kiếm

window.onload = function() { 
    //dom not only ready, but everything is loaded 
}; 

EDIT

bình mỗi Chris, đây là cách jQuery:

$(window).load(function() { 
    //dom not only ready, but everything is loaded 
}); 

Answer 2

Không chắc chính xác bao nhiêu dữ liệu đang được đưa vào ... nhưng nếu trên tài liệu sẵn sàng bạn chạy một cuộc gọi jquery ajax và sử dụng phương pháp đã hoàn thành để chạy hig của bạn chức năng hlighter? Nếu có nhiều dữ liệu thì tải trang sẽ chậm hơn.

Anyways muốn tương tự như sau

$.ajax({ 
      type: "POST", 
      url: "Where data is actually stored", 
      data: { ChannelTypeID: ChannelTypeID }, 
      datatype: "html", 
      beforeSend: function() { 

      }, 
      success: function (myHTML) { 
       $('body').html(myHTML); 
      }, 
      error: function() { 
       alert("Ajax request was unsuccessful"); 
      }, 
      complete: function() { 
       highlighterFunction(); 
      } 
     }); 

Phương pháp hoàn toàn xác định một chức năng để được chạy khi một yêu cầu AJAX hoàn tất. Hy vọng rằng sự thành công sẽ cháy sớm đủ để đẩy dữ liệu và cho phép đánh dấu của bạn hoạt động đúng cách

Answer 3

Cách đơn giản để làm điều này là giới thiệu độ trễ. Sử dụng setTimeout() để đạt được điều này. Ví dụ: setTimeout (func, 1000);

Dòng trên thực thi hàm "func" sau khi đợi 1000 mili giây. Tùy thuộc vào thời gian cần để tải nội dung của bạn, đặt khoảng thời gian (tham số) trong setTimeout. sử dụng

Ví dụ:

$(document).ready(function(){ 

function func() 
{ 
    alert("hi"); 
} 
setTimeout(func, 1000); 
}); 

Hope this helps!

Answer 4

Vấn đề với cách tiếp cận window.onload

Thậm chí nếu bạn sử dụng cách tiếp cận $(window).load, highlighter bạn thứ thể được chạy trước khi một cái gì đó từ $(document).ready hoàn thành, vì có thể có rất nhiều chức năng gọi lại không đồng bộ khắp nơi nơi đo.

cách tiếp cận của tôi

tôi sử dụng một sự kết hợp của chờ đợi document.readyState == 'complete và setTimeout. Ý tưởng là tôi muốn đợi cho đến khi trang được hiển thị đầy đủ (do đó 'complete') và sau đó tiếp tục đảm bảo rằng nội dung trình bao bọc JQuery $(document).ready đã hoàn tất (do đó setTimeout).

Dưới đây là cách tôi giải quyết vấn đề của bạn, giả sử rằng khoảng 200 mili giây là đủ thời gian để mọi thứ bên trong $(document).ready(function(){ /*...*/ }); hoàn tất.

function highlighterAction() { 
    // actually do the highlighting stuff here 
} 

function highlighter() { 
    /* 
     The short pause allows any required callback functions 
     to execute before actually highlighting, and allows 
     the JQuery $(document).ready wrapper to finish. 
    */ 
    setTimeout(function() { 
     highlighterAction(); 
    }, 200); 
} 

/* 
    Only trigger the highlighter after document fully loaded. This is 
    necessary for cases where page load takes a significant length 
    of time to fully load. 
*/ 
if (document.readyState == 'complete') { 
    highlighter(); 
} else { 
    document.onreadystatechange = function() { 
     if (document.readyState === "complete") { 
      highlighter(); 
     } 
    } 
}