ฉันต้องการรันโค้ด JavaScript บางตัวเมื่อโหลดหน้าเว็บจนเต็ม รวมถึงสิ่งต่าง ๆ เช่นรูปภาพ
ฉันรู้ว่าคุณสามารถตรวจสอบว่า DOM พร้อมหรือไม่ แต่ฉันไม่ทราบว่าเป็นเช่นเดียวกับเมื่อโหลดหน้าเว็บเต็มหรือไม่
คำตอบ:
loadที่เรียกว่า มันมา waaaaay ก่อนที่จะพร้อม DOM อยู่และ DOM พร้อมถูกสร้างขึ้นจริงด้วยเหตุผลที่แน่นอนที่loadรอในภาพ
window.addEventListener('load', function () {
alert("It's loaded!")
})window.onloadเรียกว่าเมื่อทุกองค์ประกอบของหน้า / resourse (เช่น * รวมถึง * ภาพ) ฉันถูกไหม?
onloadรอทรัพยากรทั้งหมดที่เป็นส่วนหนึ่งของเอกสาร แน่นอนว่านี่ไม่รวมคำขอที่สร้างขึ้นแบบไดนามิกซึ่งไม่ได้เป็นส่วนหนึ่งของเอกสารเช่นคำขอ AJAX
addEventListener("load", function(){... })แทนที่จะเขียนทับonloadคุณสมบัติ
โดยปกติแล้วคุณสามารถใช้งานwindow.onloadได้ แต่คุณอาจสังเกตเห็นว่าเบราว์เซอร์ล่าสุดไม่ทำงานwindow.onloadเมื่อคุณใช้ปุ่มย้อนกลับ / ไปข้างหน้า
บางคนแนะนำให้ใช้สิ่งแปลก ๆ ในการแก้ปัญหานี้ แต่จริงๆแล้วถ้าคุณแค่window.onunloadจัดการ (แม้คนที่ไม่ได้ทำอะไรเลย) พฤติกรรมการแคชนี้จะถูกปิดการใช้งานในเบราว์เซอร์ทั้งหมด MDCเอกสาร "คุณสมบัติ" นี้สวยดี แต่ด้วยเหตุผลบางอย่างยังคงมีคนที่ใช้setIntervalและแฮ็แปลกอื่น ๆ
Opera บางเวอร์ชันมีข้อบกพร่องที่สามารถแก้ไขได้โดยการเพิ่มสิ่งต่อไปนี้ในหน้าของคุณ:
<script>history.navigationMode = 'compatible';</script>หากคุณเพียงแค่พยายามรับฟังก์ชั่นจาวาสคริปต์ที่เรียกว่าหนึ่งครั้งต่อการดู (และไม่จำเป็นว่าหลังจากโหลด DOM เสร็จแล้ว) คุณสามารถทำสิ่งนี้ได้:
<img src="javascript:location.href='javascript:yourFunction();';">ตัวอย่างเช่นฉันใช้เคล็ดลับนี้เพื่อโหลดไฟล์ที่มีขนาดใหญ่มากลงในแคชบนหน้าจอโหลด:
<img src="bigfile"
onload="this.location.href='javascript:location.href=\'javascript:doredir();\';';doredir();">เพื่อความสมบูรณ์คุณอาจต้องการผูกเข้ากับ DOMContentLoaded ซึ่งตอนนี้ได้รับการสนับสนุนอย่างกว้างขวาง
document.addEventListener("DOMContentLoaded", function(event){
// your code here
});ข้อมูลเพิ่มเติม: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
$.readyฉันคิดว่ามันมีส่วนร่วมที่ดี Btw ฉันจะใช้addEventListener-method สำหรับloadเหตุการณ์ด้วยเพราะจะช่วยให้คุณมีการโทรกลับหลายครั้ง:window.addEventListener("load", function(event){ // your code here });
ลองใช้เลยเฉพาะเรียกใช้หลังจากหน้าทั้งหมดโหลดแล้ว
โดย Javascript
window.onload = function(){
// code goes here
};โดย Jquery
$(window).bind("load", function() {
// code goes here
});$(window)ทำให้ฉันคิดว่านี่เป็น jquery ใช่ไหม? หรือฉันจะทำให้สับสนกับจาวาสคริปต์? (ฉันใหม่สำหรับ JS)
$(document).ready();เมื่อ jQuery ว่าง
ลองรหัสนี้
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
initApplication();
}
}เยี่ยมชมhttps://developer.mozilla.org/en-US/docs/DOM/document.readyStateสำหรับรายละเอียดเพิ่มเติม
"interactive"ไม่โหลดเต็มที่ "complete"เต็มแล้ว
เหตุการณ์ window.onload จะเริ่มทำงานเมื่อทุกอย่างถูกโหลดรวมถึงรูปภาพ ฯลฯ
คุณต้องการตรวจสอบสถานะ DOM ready ถ้าคุณต้องการให้โค้ด js ของคุณดำเนินการโดยเร็วที่สุด แต่คุณยังต้องเข้าถึงองค์ประกอบ DOM
Javascript ที่ใช้onLoad()งานกิจกรรมจะรอให้โหลดหน้าเว็บก่อนดำเนินการ
<body onload="somecode();" >หากคุณใช้ฟังก์ชันเอกสารพร้อมกรอบงานของ jQuery โค้ดจะโหลดทันทีที่โหลด DOM และก่อนที่โหลดเนื้อหาหน้า:
$(document).ready(function() {
// jQuery code goes here
});คุณอาจต้องการใช้window.onloadเนื่องจากเอกสารระบุว่าไม่ได้ถูกไล่ออกจนกว่าทั้ง DOM พร้อมและสินทรัพย์อื่น ๆ ทั้งหมดในหน้า (ภาพ ฯลฯ ) ถูกโหลด
และนี่คือวิธีที่จะทำกับPrototypeJS :
Event.observe(window, 'load', function(event) {
// Do stuff
});ในเบราว์เซอร์สมัยใหม่ที่มี javascript ที่ทันสมัย (> = 2015) คุณสามารถเพิ่มtype="module"ไปยังแท็กสคริปต์ของคุณและทุกอย่างภายในสคริปต์นั้นจะทำงานหลังจากโหลดหน้าเว็บทั้งหมด เช่น:
<script type="module">
alert("runs after") // Whole page loads before this line execute
</script>
<script>
alert("runs before")
</script>เบราว์เซอร์ที่มีอายุมากกว่าจะเข้าใจnomoduleแอตทริบิวต์ บางสิ่งเช่นนี้:
<script nomodule>
alert("tuns after")
</script>onloadใช้$(window).loadแทน (jQuery):$(window).load(function() {
//code
});onloadทรัพย์สินของ GlobalEventHandlers mixin เป็นตัวจัดการเหตุการณ์สำหรับเหตุการณ์โหลดของหน้าต่าง XMLHttpRequest องค์ประกอบอื่น ๆที่เกิดเพลิงไหม้เมื่อทรัพยากรที่มีการโหลด
ดังนั้นโดยพื้นฐานแล้วจาวาสคริปต์นั้นมีวิธีการโหลดบนหน้าต่างที่ได้รับการดำเนินการซึ่งหน้าเต็มโหลดรวมถึงภาพ ...
คุณสามารถทำอะไรบางอย่าง:
var spinner = true;
window.onload = function() {
//whatever you like to do now, for example hide the spinner in this case
spinner = false;
};อัปเดต 2019:นี่คือคำตอบที่เหมาะกับฉัน ตามที่ฉันต้องการคำขอ ajax หลายรายการเพื่อดำเนินการและส่งคืนข้อมูลก่อนเพื่อนับจำนวนรายการ
$(document).ajaxComplete(function(){
alert("Everything is ready now!");
});