ฉันรันสคริปต์ภายนอกใช้ภายใน<script><head>
ตอนนี้เนื่องจากสคริปต์ทำงานก่อนหน้าโหลดฉันไม่สามารถเข้าถึง<body>เหนือสิ่งอื่นใด ฉันต้องการเรียกใช้งาน JavaScript บางส่วนหลังจากเอกสาร "โหลดแล้ว" (ดาวน์โหลด HTML ทั้งหมดและในแรม) มีเหตุการณ์ใดบ้างที่ฉันสามารถขอเมื่อสคริปต์ของฉันดำเนินการที่จะถูกเรียกใช้ในการโหลดหน้า?
คำตอบ:
โซลูชั่นเหล่านี้จะทำงาน:
<body onload="script();">หรือ
document.onload = function ...หรือแม้กระทั่ง
window.onload = function ...สังเกตได้ว่า ตัวเลือกสุดท้ายคือวิธีที่ดีกว่าที่จะไปเพราะมันเป็นunobstrusiveและถือเป็นมาตรฐานมากขึ้น
document.onload=ไม่เสือก en.wikipedia.org/wiki/Unobtrusive_JavaScript
แบบพกพาที่สมเหตุสมผลและไม่ใช่เฟรมเวิร์กเพื่อให้สคริปต์ของคุณตั้งค่าฟังก์ชันให้ทำงานที่เวลาโหลด:
if(window.attachEvent) {
window.attachEvent('onload', yourFunctionName);
} else {
if(window.onload) {
var curronload = window.onload;
var newonload = function(evt) {
curronload(evt);
yourFunctionName(evt);
};
window.onload = newonload;
} else {
window.onload = yourFunctionName;
}
}เหตุการณ์นี้เกิดขึ้นเมื่อเอกสาร HTML เริ่มต้นถูกโหลดและวิเคราะห์โดยสมบูรณ์โดยไม่ต้องรอสไตล์ชีตรูปภาพและเฟรมย่อยเพื่อให้การโหลดเสร็จสิ้น ในขั้นตอนนี้คุณสามารถปรับการโหลดรูปภาพและ css โดยทางโปรแกรมโดยขึ้นอยู่กับอุปกรณ์ผู้ใช้หรือความเร็วแบนด์วิดท์
ดำเนินการหลังจากโหลด DOM (ก่อนหน้า img และ css):
document.addEventListener("DOMContentLoaded", function(){
//....
});หมายเหตุ: JavaScript แบบซิงโครนัสจะหยุดการแยกวิเคราะห์ DOM ชั่วคราว หากคุณต้องการให้ DOM แยกวิเคราะห์โดยเร็วที่สุดหลังจากผู้ใช้ร้องขอหน้าคุณสามารถเปิด JavaScript แบบอะซิงโครนัสและเพิ่มประสิทธิภาพการโหลดสไตล์ชีท
เหตุการณ์ที่แตกต่างกันมากโหลดควรจะใช้เฉพาะในการตรวจสอบหน้าอย่างเต็มที่โหลด มันเป็นความผิดพลาดที่ได้รับความนิยมอย่างไม่น่าเชื่อในการใช้โหลดโดยที่ DOMContentLoaded จะมีความเหมาะสมมากกว่าดังนั้นควรระมัดระวัง
มีข้อผิดพลาดหลังจากทุกอย่างถูกโหลดและแยกวิเคราะห์:
window.addEventListener("load", function(){
// ....
});ทรัพยากร MDN:
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/load
รายการ MDN ของเหตุการณ์ทั้งหมด:
window.onload = ...คิดว่าสคริปต์ของฉันจะรอจนกว่าทุกอย่างจะถูกดาวน์โหลดอย่างสมบูรณ์ก่อนที่จะทำงาน แต่ดูเหมือนว่ามันจะwindow.onloadมีพฤติกรรมเหมือนจริงdocument.addEventListener("DOMContentLoaded", ...ในขณะที่window.addEventListener("load", ...ทุกอย่างจะรอให้ดาวน์โหลดทุกอย่างจริงๆ ผมจะมีความคิดว่าwindow.onloadควรจะเทียบเท่ากับwindow.addEventListener("load", ...มากกว่าdocument.addEventListener("DOMContentLoaded", ...?? ฉันได้รับผลลัพธ์เดียวกันใน Chrome และ FF
คุณสามารถใส่แอตทริบิวต์ "onload" ไว้ในเนื้อความ
...<body onload="myFunction()">...หรือถ้าคุณใช้ jQuery คุณสามารถทำได้
$(document).ready(function(){ /*code here*/ })
or
$(window).load(function(){ /*code here*/ })ฉันหวังว่ามันจะตอบคำถามของคุณ
โปรดทราบว่า $ (หน้าต่าง). load จะดำเนินการหลังจากสร้างเอกสารบนหน้าของคุณ
หากสคริปต์โหลดภายใน<head>เอกสารอาจเป็นไปได้ที่จะใช้deferแอตทริบิวต์ในแท็กสคริปต์
ตัวอย่าง:
<script src="demo_defer.js" defer></script>จาก https://developer.mozilla.org :
Defer
แอ็ตทริบิวต์ Boolean นี้ถูกตั้งค่าให้บ่งบอกถึงเบราว์เซอร์ที่สคริปต์นั้นมีความหมายว่าจะต้องดำเนินการหลังจากที่เอกสารถูกแยกวิเคราะห์ แต่ก่อนที่จะทำการยิง DOMContentLoaded
ต้องไม่ใช้แอตทริบิวต์นี้หากแอตทริบิวต์ src ขาด (เช่นสำหรับสคริปต์แบบอินไลน์) ในกรณีนี้มันจะไม่มีผล
เพื่อให้ได้ผลคล้ายกันสำหรับสคริปต์ที่แทรกแบบไดนามิกให้ใช้ async = false แทน สคริปต์ที่มีแอตทริบิวต์ defer จะทำงานตามลำดับที่ปรากฏในเอกสาร
นี่คือสคริปต์ตาม js รอการโหลดหลังจากโหลดหน้าเว็บแล้ว
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "deferredfunctions.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>ฉันจะวางที่ไหน
วางรหัสใน HTML ของคุณหน้า
</body>แท็ก (ใกล้กับด้านล่างของไฟล์ HTML)
มันทำอะไร?
deferredfunctions.jsรหัสนี้กล่าวว่ารอให้เอกสารทั้งหมดที่จะโหลดแล้วโหลดไฟล์ภายนอก
นี่คือตัวอย่างของรหัสข้างต้น - เลื่อนการแสดงผลของ JS
ฉันเขียนสิ่งนี้ขึ้นอยู่กับการโหลดที่เลื่อนออกไปของ javascript pagespeed google concept และแหล่งที่มาจากบทความนี้Defer loading javascript
ดู hooking document.onloadหรือ $(document).load(...)jQuery
การทำงานซอบน<body onload="myFunction()">
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function myFunction(){
alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>
</html><script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>http://www.feedthebot.com/pagespeed/defer-loading-javascript.html
หากคุณใช้ jQuery
$(function() {...});
เทียบเท่ากับ
$(document).ready(function () { })
หรืออีกมือสั้น:
$().ready(function () { })
ดูJQuery $ function () เปิดเหตุการณ์ใด และhttps://api.jquery.com/ready/
document.onreadystatechange = function(){
if(document.readyState === 'complete'){
/*code here*/
}
}ดูที่นี่: http://msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx
บางครั้งฉันพบว่าในหน้าเว็บที่ซับซ้อนมากขึ้นซึ่งองค์ประกอบบางอย่างไม่ได้โหลดตามเวลาที่กำหนด หากเป็นกรณีนี้ให้เพิ่ม setTimeout ก่อนที่ฟังก์ชันของคุณจะหน่วงเวลาสักครู่ มันไม่ได้สวยงาม แต่มันเป็นแฮ็คที่เรียบง่ายที่แสดงผลได้ดี
window.onload = function(){ doSomethingCool(); };กลายเป็น...
window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };เพียงแค่กำหนด<body onload="aFunction()">ว่าจะถูกเรียกหลังจากโหลดหน้าเว็บแล้ว aFunction() { }รหัสของคุณในสคริปต์กว่าล้อมรอบด้วย
<body onload="myFunction()">รหัสนี้ทำงานได้ดี
แต่window.onloadวิธีการมีการพึ่งพาต่าง ๆ ดังนั้นมันอาจไม่ทำงานตลอดเวลา
ใช้ห้องสมุด YUI (ฉันชอบมาก):
YAHOO.util.Event.onDOMReady(function(){
//your code
});พกพาสะดวกและสวยงาม! อย่างไรก็ตามหากคุณไม่ได้ใช้ YUI สำหรับสิ่งอื่น ๆ (ดูเอกสารของมัน) ฉันจะบอกว่ามันไม่คุ้มค่าที่จะใช้
หมายเหตุ: ในการใช้รหัสนี้คุณต้องนำเข้า 2 สคริปต์
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js" ></script>มีเอกสารที่ดีมากเกี่ยวกับวิธีการตรวจสอบว่าเอกสารโหลดโดยใช้ Javascript หรือ Jquery
การใช้ Javascript ดั้งเดิมสามารถทำได้
if (document.readyState === "complete") {
init();
}สิ่งนี้สามารถทำได้ภายในช่วงเวลา
var interval = setInterval(function() {
if(document.readyState === 'complete') {
clearInterval(interval);
init();
}
}, 100);switch (document.readyState) {
case "loading":
// The document is still loading.
break;
case "interactive":
// The document has finished loading. We can now access the DOM elements.
var span = document.createElement("span");
span.textContent = "A <span> element.";
document.body.appendChild(span);
break;
case "complete":
// The page is fully loaded.
console.log("Page is loaded completely");
break;
}ใช้ Jquery เพื่อตรวจสอบเฉพาะในกรณีที่ DOM พร้อม
// A $( document ).ready() block.
$( document ).ready(function() {
console.log( "ready!" );
});เพื่อตรวจสอบว่าโหลดทรัพยากรทั้งหมดใช้ window.load หรือไม่
$( window ).load(function() {
console.log( "window loaded" );
});ใช้รหัสนี้กับห้องสมุด jQuery สิ่งนี้จะทำงานได้อย่างสมบูรณ์แบบ
$(window).bind("load", function() {
// your javascript event
});$(window).on("load", function(){ ... });.ready ()ทำงานได้ดีที่สุดสำหรับฉัน
$(document).ready(function(){ ... });.load ()จะทำงานได้ แต่จะไม่รอจนกว่าจะโหลดหน้าเว็บ
jQuery(window).load(function () { ... });ใช้งานไม่ได้สำหรับฉันแบ่งสคริปต์อินไลน์ถัดไป ฉันใช้ jQuery 3.2.1 ร่วมกับส้อม jQuery อื่น ๆ ด้วย
ในการซ่อนเว็บไซต์ของฉันโหลดซ้อนทับฉันใช้สิ่งต่อไปนี้:
<script>
$(window).on("load", function(){
$('.loading-page').delay(3000).fadeOut(250);
});
</script>document.addEventListener('readystatechange', event => {
// When HTML/DOM elements are ready:
if (event.target.readyState === "interactive") { //does same as: ..addEventListener("DOMContentLoaded"..
alert("hi 1");
}
// When window loaded ( external resources are loaded too- `css`,`src`, etc...)
if (event.target.readyState === "complete") {
alert("hi 2");
}
});$(document).ready(function() { //same as: $(function() {
alert("hi 1");
});
$(window).load(function() {
alert("hi 2");
});หมายเหตุ: - อย่าใช้มาร์กอัปด้านล่าง (เพราะมันเขียนทับการประกาศชนิดเดียวกันอื่น ๆ ):
document.onreadystatechange = ...อย่างที่ Daniel พูดคุณสามารถใช้ document.onload ได้
กรอบงานจาวาสคริปต์ที่หลากหลาย hwoever (jQuery, Mootools เป็นต้น) ใช้เหตุการณ์ที่กำหนดเอง 'domready' ซึ่งฉันคิดว่าต้องมีประสิทธิภาพมากกว่า หากคุณกำลังพัฒนาด้วย javascript ฉันขอแนะนำให้ใช้ประโยชน์จากเฟรมเวิร์กพวกเขาจะเพิ่มประสิทธิภาพการทำงานของคุณอย่างหนาแน่น
<script type="text/javascript">
$(window).bind("load", function() {
// your javascript event here
});
</script>asnycคุณลักษณะแนะนำให้ใช้ของฉันสำหรับแท็กสคริปต์ที่ช่วยให้คุณโหลดสคริปต์ภายนอกหลังจากโหลดหน้าเว็บ
<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>ใช้ฟังก์ชั่น onload การดำเนินการด้วยตนเอง
window.onload = function (){
/* statements */
}(); onloadตัวจัดการอื่น ๆโดยใช้วิธีนี้ คุณควรเพิ่มผู้ฟังแทน