Saya menjalankan skrip eksternal, menggunakan bagian <script>dalam <head>.
Sekarang karena skrip dieksekusi sebelum halaman dimuat, saya tidak dapat mengakses <body>, antara lain. Saya ingin menjalankan beberapa JavaScript setelah dokumen telah "dimuat" (HTML sepenuhnya diunduh dan dalam-RAM). Apakah ada peristiwa yang dapat saya kaitkan saat skrip saya dijalankan, yang akan dipicu saat memuat halaman?
Jawaban:
Solusi ini akan bekerja:
<body onload="script();">atau
document.onload = function ...atau bahkan
window.onload = function ...Perhatikan bahwa opsi terakhir adalah cara yang lebih baik karena tidak mengganggu dan dianggap lebih standar .
document.onload=is non obtrusive en.wikipedia.org/wiki/Unobtrusive_JavaScript
Sangat portabel, cara non-kerangka skrip Anda mengatur fungsi untuk dijalankan pada waktu buka:
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;
}
}Acara ini dipecat ketika dokumen HTML awal telah dimuat dan diurai sepenuhnya , tanpa menunggu stylesheet, gambar, dan subframe selesai dimuat. Pada tahap ini Anda dapat secara optimal mengoptimalkan pemuatan gambar dan css berdasarkan perangkat pengguna atau kecepatan bandwidth.
Menjalankan setelah DOM dimuat (sebelum img dan css):
document.addEventListener("DOMContentLoaded", function(){
//....
});Catatan: JavaScript Sinkron menjeda penguraian DOM. Jika Anda ingin DOM diurai secepat mungkin setelah pengguna meminta halaman, Anda dapat mengubah JavaScript Anda tidak sinkron dan mengoptimalkan pemuatan stylesheet.
Peristiwa yang sangat berbeda, muat , seharusnya hanya digunakan untuk mendeteksi halaman yang terisi penuh . Ini adalah kesalahan yang sangat populer untuk menggunakan load di mana DOMContentLoaded akan jauh lebih tepat, jadi berhati-hatilah.
Exectues setelah semuanya dimuat dan diuraikan:
window.addEventListener("load", function(){
// ....
});Sumber Daya MDN:
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/load
Daftar semua acara MDN:
window.onload = ...berpikir bahwa skrip saya akan menunggu sampai semuanya sepenuhnya diunduh sebelum berjalan tetapi tampaknya window.onloadbenar-benar berperilaku seperti itu document.addEventListener("DOMContentLoaded", ..., sedangkan yang window.addEventListener("load", ...benar - benar menunggu semuanya diunduh sepenuhnya. Saya akan berpikir bahwa window.onloadharus setara dengan window.addEventListener("load", ...bukan document.addEventListener("DOMContentLoaded", ...?? Saya mendapat hasil yang sama di Chrome dan FF.
Anda dapat menempatkan atribut "membebani" di dalam tubuh
...<body onload="myFunction()">...Atau jika Anda menggunakan jQuery, Anda bisa melakukannya
$(document).ready(function(){ /*code here*/ })
or
$(window).load(function(){ /*code here*/ })Saya harap ini menjawab pertanyaan Anda.
Perhatikan bahwa $ (window) .load akan dieksekusi setelah dokumen diberikan pada halaman Anda.
Jika skrip dimuat dalam <head>dokumen, maka dimungkinkan menggunakan deferatribut dalam tag skrip.
Contoh:
<script src="demo_defer.js" defer></script>Dari https://developer.mozilla.org :
menunda
Atribut Boolean ini diatur untuk menunjukkan kepada browser bahwa skrip dimaksudkan untuk dieksekusi setelah dokumen telah diuraikan, tetapi sebelum memecat DOMContentLoaded.
Atribut ini tidak boleh digunakan jika atribut src tidak ada (yaitu untuk skrip inline), dalam hal ini tidak akan berpengaruh.
Untuk mencapai efek yang sama untuk skrip yang disisipkan secara dinamis, gunakan async = false. Script dengan atribut defer akan dieksekusi sesuai urutan kemunculannya dalam dokumen.
Berikut skrip berdasarkan penangguhan js yang ditangguhkan setelah halaman dimuat,
<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>Di mana saya menempatkan ini?
Rekatkan kode dalam HTML Anda tepat sebelum
</body>tag (dekat bagian bawah file HTML Anda).
Apa fungsinya?
Kode ini mengatakan tunggu seluruh dokumen dimuat, lalu muat file eksternal
deferredfunctions.js.
Berikut adalah contoh kode di atas - Tunda Rendering JS
Saya menulis ini berdasarkan penundaan pemuatan konsep javascript pagespeed google dan juga bersumber dari artikel ini Menunda pemuatan javascript
Lihatlah hooking document.onloadatau di jQuery $(document).load(...).
Fiddle Kerja di<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
Jika Anda menggunakan jQuery,
$(function() {...});
setara dengan
$(document).ready(function () { })
atau tangan pendek lainnya:
$().ready(function () { })
Lihat Peristiwa apa yang dijalankan JQuery $ function ()? dan https://api.jquery.com/ready/
document.onreadystatechange = function(){
if(document.readyState === 'complete'){
/*code here*/
}
}lihat di sini: http://msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx
Terkadang saya menemukan pada halaman yang lebih kompleks bahwa tidak semua elemen telah dimuat oleh window time.onload diaktifkan. Jika itu masalahnya, tambahkan setTimeout sebelum fungsi Anda untuk menunda sebentar. Itu tidak elegan tetapi ini adalah retasan sederhana yang menghasilkan dengan baik.
window.onload = function(){ doSomethingCool(); };menjadi...
window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };Cukup tentukan <body onload="aFunction()">yang akan dipanggil setelah halaman dimuat. Kode Anda dalam skrip tidak disertakan oleh aFunction() { }.
<body onload="myFunction()">Kode ini berfungsi dengan baik.
Tetapi window.onloadmetode memiliki berbagai dependensi. Jadi mungkin tidak berfungsi sepanjang waktu.
Menggunakan perpustakaan YUI (I love it):
YAHOO.util.Event.onDOMReady(function(){
//your code
});Portable dan cantik! Namun, jika Anda tidak menggunakan YUI untuk hal-hal lain (lihat dokumennya) saya akan mengatakan bahwa itu tidak layak untuk digunakan.
NB: untuk menggunakan kode ini Anda perlu mengimpor 2 skrip
<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>Ada dokumentasi yang sangat bagus tentang Cara mendeteksi apakah dokumen telah dimuat menggunakan Javascript atau Jquery.
Menggunakan Javascript asli ini dapat dicapai
if (document.readyState === "complete") {
init();
}Ini juga dapat dilakukan di dalam interval
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;
}Menggunakan Jquery Untuk memeriksa hanya apakah DOM sudah siap
// A $( document ).ready() block.
$( document ).ready(function() {
console.log( "ready!" );
});Untuk memeriksa apakah semua sumber daya dimuat gunakan window.load
$( window ).load(function() {
console.log( "window loaded" );
});Gunakan kode ini dengan pustaka jQuery, ini akan berfungsi dengan baik.
$(window).bind("load", function() {
// your javascript event
});$(window).on("load", function(){ ... });.ready () bekerja paling baik untuk saya.
$(document).ready(function(){ ... });.load () akan berfungsi, tetapi tidak akan menunggu sampai halaman dimuat.
jQuery(window).load(function () { ... });Tidak berfungsi untuk saya, istirahat skrip in-to-in. Saya juga menggunakan jQuery 3.2.1 bersama dengan beberapa garpu jQuery lainnya.
Untuk menyembunyikan situs web saya memuat overlay, saya menggunakan yang berikut:
<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");
});CATATAN: - Jangan gunakan markup di bawah ini (karena ini menimpa deklarasi sejenis lainnya):
document.onreadystatechange = ...Seperti kata Daniel, Anda bisa menggunakan document.onload.
Berbagai kerangka kerja javascript apa pun (jQuery, Mootools, dll.) Menggunakan acara khusus 'domready', yang saya kira harus lebih efektif. Jika Anda mengembangkan dengan javascript, saya sangat merekomendasikan mengeksploitasi suatu kerangka kerja, mereka secara besar-besaran meningkatkan produktivitas Anda.
<script type="text/javascript">
$(window).bind("load", function() {
// your javascript event here
});
</script>Saran saya gunakan asnycatribut untuk tag skrip yang membantu Anda memuat skrip eksternal setelah pemuatan halaman
<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>gunakan fungsi eksekusi mandiri
window.onload = function (){
/* statements */
}(); onloadpenangan lain dengan menggunakan pendekatan ini. Sebagai gantinya, Anda harus menambahkan pendengar.