Tôi cần phải thực thi một số mã JavaScript khi trang đã được tải đầy đủ. Điều này bao gồm những thứ như hình ảnh.
Tôi biết bạn có thể kiểm tra xem DOM đã sẵn sàng chưa, nhưng tôi không biết liệu điều này có giống như khi trang được tải đầy đủ hay không.
Câu trả lời:
Đó gọi là load. Nó đã xuất hiện trước khi DOM sẵn sàng và DOM sẵn sàng thực sự được tạo ra với lý do chính xác là loadchờ đợi trên hình ảnh.
window.addEventListener('load', function () {
alert("It's loaded!")
})window.onloadđược gọi khi mọi thành phần / độ phân giải của trang (tức là * bao gồm * hình ảnh). Tôi có đúng không
onloadchờ tất cả các tài nguyên là một phần của tài liệu. Tất nhiên, điều này loại trừ các yêu cầu được tạo một cách linh hoạt không phải là một phần của chính tài liệu, ví dụ: yêu cầu AJAX.
addEventListener("load", function(){... })thay vì ghi đè onloadbất động sản.
Thông thường bạn có thể sử dụng window.onload, nhưng bạn có thể nhận thấy rằng các trình duyệt gần đây không kích hoạt window.onloadkhi bạn sử dụng các nút lịch sử lùi / tiến.
Một số người đề xuất những mâu thuẫn kỳ lạ để giải quyết vấn đề này, nhưng thực sự nếu bạn chỉ cần window.onunloadxử lý (thậm chí một công cụ không làm gì cả), hành vi lưu trữ này sẽ bị vô hiệu hóa trong tất cả các trình duyệt. Các MDC tài liệu "tính năng" này khá tốt, nhưng đối với một số lý do vẫn có những người sử dụng setIntervalvà hacks khác lạ.
Một số phiên bản của Opera có một lỗi có thể được khắc phục bằng cách thêm phần sau vào đâu đó trong trang của bạn:
<script>history.navigationMode = 'compatible';</script>Nếu bạn chỉ đang cố gắng để có được một hàm javascript được gọi một lần cho mỗi lượt xem (và không nhất thiết là sau khi DOM tải xong), bạn có thể làm một cái gì đó như thế này:
<img src="javascript:location.href='javascript:yourFunction();';">Ví dụ: tôi sử dụng thủ thuật này để tải trước một tệp rất lớn vào bộ đệm trên màn hình tải:
<img src="bigfile"
onload="this.location.href='javascript:location.href=\'javascript:doredir();\';';doredir();">Để hoàn thiện, bạn cũng có thể muốn liên kết nó với DOMContentLoaded, hiện được hỗ trợ rộng rãi
document.addEventListener("DOMContentLoaded", function(event){
// your code here
});Thông tin thêm: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
$.readytôi nghĩ rằng nó đã đóng góp tốt. Btw. Tôi cũng sẽ sử dụng addEventListener-method cho loadsự kiện này, vì nó cho phép bạn có nhiều cuộc gọi lại:window.addEventListener("load", function(event){ // your code here });
Hãy thử nó chỉ chạy sau khi toàn bộ trang đã được tải
Bằng Javascript
window.onload = function(){
// code goes here
};Bởi Jquery
$(window).bind("load", function() {
// code goes here
});$(window)làm cho tôi nghĩ rằng đây sẽ là jquery - phải không? Hoặc tôi đang nhận được một số cú pháp javascript nhầm lẫn? (Tôi mới biết về JS).
$(document).ready();khi jQuery có sẵn?
Hãy thử mã này
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
initApplication();
}
}truy cập https://developer.mozilla.org/en-US/docs/DOM/document. yetState để biết thêm chi tiết
"interactive"không được tải đầy đủ. "complete"đã được tải đầy đủ
Javascript sử dụng onLoad()sự kiện này, sẽ đợi trang được tải trước khi thực thi.
<body onload="somecode();" >Nếu bạn đang sử dụng chức năng sẵn sàng tài liệu của khung công tác jQuery, mã sẽ được tải ngay khi DOM được tải và trước khi nội dung trang được tải:
$(document).ready(function() {
// jQuery code goes here
});Bạn có thể muốn sử dụng window.onload , vì các tài liệu chỉ ra rằng nó không được kích hoạt cho đến khi cả DOM đã sẵn sàng và TẤT CẢ các tài sản khác trong trang (hình ảnh, v.v.) được tải.
Và đây là một cách để làm điều đó với PrototypeJS :
Event.observe(window, 'load', function(event) {
// Do stuff
});Trong các trình duyệt hiện đại có javascript hiện đại (> = 2015), bạn có thể thêm type="module"vào thẻ tập lệnh của mình và mọi thứ bên trong tập lệnh đó sẽ thực thi sau khi tải toàn bộ trang. ví dụ:
<script type="module">
alert("runs after") // Whole page loads before this line execute
</script>
<script>
alert("runs before")
</script>các trình duyệt cũ hơn sẽ hiểu nomodulethuộc tính. Một cái gì đó như thế này:
<script nomodule>
alert("tuns after")
</script>Để biết thêm thông tin bạn có thể truy cập javascript.info .
onloadsử dụng $(window).loadthay thế (jQuery):$(window).load(function() {
//code
});Các onload tài sản của GlobalEventHandlers mixin là một event handler cho sự kiện load của một cửa sổ, XMLHttpRequest, yếu tố, vv mà cháy khi tài nguyên đã được nạp.
Vì vậy, về cơ bản, javascript đã có phương thức onload trên cửa sổ để thực thi trang nào được tải đầy đủ bao gồm cả hình ảnh ...
Bạn có thể làm một cái gì đó:
var spinner = true;
window.onload = function() {
//whatever you like to do now, for example hide the spinner in this case
spinner = false;
};