Ben kullanarak harici bir komut dosyası yürütme ediyorum <script>içini <head>.
Komut dosyası sayfa yüklenmeden önce yürütüldüğünden <body>, diğer şeylerin yanı sıra. Belge "yüklendikten" (HTML tam olarak indirildi ve RAM içinde) bazı JavaScript yürütmek istiyorum. Betiğim yürütüldüğünde takabileceğim, sayfa yüklenirken tetiklenecek herhangi bir olay var mı?
Yanıtlar:
Bu çözümler işe yarar:
<body onload="script();">veya
document.onload = function ...ya da
window.onload = function ...Not o son seçenek gitmek için daha iyi bir yoludur bu yana unobstrusive ve daha fazla standart olarak kabul .
document.onload=rahatsız edici değil en.wikipedia.org/wiki/Unobtrusive_JavaScript
Betiğinizin yükleme zamanında çalışacak bir işlevi ayarlamasını makul derecede taşınabilir, çerçevesiz bir şekilde yapın:
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;
}
}Bu olay, ilk HTML belgesi tamamen yüklenip ayrıştırıldığında , stil sayfaları, resimler ve alt çerçevelerin yüklenmesini beklemeden tetiklenir . Bu aşamada, kullanıcı cihazına veya bant genişliği hızına göre görüntü ve css yüklemesini programlı olarak optimize edebilirsiniz.
DOM yüklendikten sonra yürütülür (img ve css'den önce):
document.addEventListener("DOMContentLoaded", function(){
//....
});Not: Senkronize JavaScript, DOM'nin ayrıştırılmasını duraklatır. DOM'un kullanıcı sayfayı istedikten sonra olabildiğince hızlı ayrıştırılmasını istiyorsanız , JavaScript'inizi eşzamansız hale getirebilir ve stil sayfalarının yüklenmesini optimize edebilirsiniz
Çok farklı bir olay olan yükleme , yalnızca tam yüklü bir sayfayı algılamak için kullanılmalıdır . DOMContentLoaded'in çok daha uygun olacağı yükü kullanmak inanılmaz derecede popüler bir hatadır, bu yüzden dikkatli olun.
Her şey yüklendikten ve ayrıştırıldıktan sonraki özetler:
window.addEventListener("load", function(){
// ....
});MDN Kaynakları:
https://developer.mozilla.org/tr-TR/docs/Web/Events/DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/load
Tüm olayların MDN listesi:
window.onload = ...her şey tamamen çalıştırmadan önce indirilen kadar benim komut beklemek olacağını düşünerek ama öyle görünüyor window.onloadgibi aslında davranır document.addEventListener("DOMContentLoaded", ..., oysa window.addEventListener("load", ...gerçekten her şey tamamen indirilebilmesi için bekleme yapar. Bunun yerine window.onloadeşit olması gerektiğini düşünürdüm ?? Aynı sonucu Chrome ve FF'de de aldım. window.addEventListener("load", ...document.addEventListener("DOMContentLoaded", ...
Gövde içine bir "onload" özelliği koyabilirsiniz
...<body onload="myFunction()">...Veya jQuery kullanıyorsanız,
$(document).ready(function(){ /*code here*/ })
or
$(window).load(function(){ /*code here*/ })Umarım sorunuzu cevaplar.
$ (Window) .load değerinin, belge sayfanızda oluşturulduktan sonra yürütüleceğini unutmayın.
Komut dosyaları <head>belgenin içine yüklenirse ,defer , komut dosyası etiketindeki niteliği .
Misal:
<script src="demo_defer.js" defer></script>Gönderen https://developer.mozilla.org :
erteleme
Bu Boolean özniteliği, tarayıcıya komut dosyasının belge ayrıştırıldıktan sonra ancak DOMContentLoaded tetiklenmeden önce yürütülmesi gerektiğini belirtecek şekilde ayarlanmıştır.
Src özniteliği yoksa (yani satır içi komut dosyaları için) bu öznitelik kullanılmamalıdır, bu durumda herhangi bir etkisi olmaz.
Dinamik olarak eklenen komut dosyalarında benzer bir efekt elde etmek için bunun yerine async = false komutunu kullanın. Erteleme özniteliğine sahip komut dosyaları, belgede göründükleri sırayla yürütülür.
Sayfa yüklendikten sonra ertelenmiş js yüklemesine dayanan bir komut dosyası,
<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>Bunu nereye koyacağım?
Kodu HTML'nize
</body>etiketin hemen önüne yapıştırın (HTML dosyanızın altına yakın).
Bu ne işe yarıyor?
Bu kod, tüm belgenin yüklenmesini beklemesini ve ardından harici dosyayı yüklemesini söylüyor
deferredfunctions.js.
Yukarıdaki kodun bir örneği: Defer Rendering of JS
Bunun temelinde yazdı javascript ait Tecilli yükleme Sayfa Hızı google konsepti ve ayrıca bu yazı kaynaklı ertele yükleme javascript
Kancaya document.onloadveya jQuery'ye bakın $(document).load(...).
Üzerinde çalışan keman<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 kullanıyorsanız,
$(function() {...});
eşittir
$(document).ready(function () { })
veya başka bir kısa el:
$().ready(function () { })
Bkz. JQuery $ function () hangi olayı başlatır? ve https://api.jquery.com/ready/
document.onreadystatechange = function(){
if(document.readyState === 'complete'){
/*code here*/
}
}buraya bakın: http://msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx
Bazen daha karmaşık sayfalarda zaman penceresi tarafından yüklenen tüm öğelerin bulunmadığını görüyorum. Yük ateşlenir. Bu durumda, gecikmek için işlevinizin bir an önce setTimeout ekleyin. Zarif değil ama iyi işleyen basit bir hack.
window.onload = function(){ doSomethingCool(); };olur ...
window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };Sadece <body onload="aFunction()">sayfa yüklendikten sonra çağrılacak tanımlayın . Koddaki kodunuz daha fazla aFunction() { }.
<body onload="myFunction()">Bu kod iyi çalışıyor.
Ancak window.onloadyöntemin çeşitli bağımlılıkları vardır. Bu yüzden her zaman işe yaramayabilir.
YUI kütüphanesini kullanarak (onu seviyorum):
YAHOO.util.Event.onDOMReady(function(){
//your code
});Taşınabilir ve güzel! Ancak, YUI'yi başka şeyler için kullanmazsanız (dokümana bakın) kullanmaya değer olmadığını söyleyebilirim.
Not: Bu kodu kullanmak için 2 komut dosyasını içe aktarmanız gerekir
<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>Belgenin Javascript veya Jquery kullanılarak yüklenip yüklenmediğini algılama hakkında çok iyi bir belge vardır .
Yerel Javascript kullanılarak bu gerçekleştirilebilir
if (document.readyState === "complete") {
init();
}Bu aralık içinde de yapılabilir
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 kullanma Yalnızca DOM'un hazır olup olmadığını kontrol etmek için
// A $( document ).ready() block.
$( document ).ready(function() {
console.log( "ready!" );
});Tüm kaynakların yüklü olup olmadığını kontrol etmek için window.load komutunu kullanın.
$( window ).load(function() {
console.log( "window loaded" );
});Bu kodu jQuery kütüphanesi ile kullanın, bu gayet iyi çalışır.
$(window).bind("load", function() {
// your javascript event
});$(window).on("load", function(){ ... });.ready () benim için en iyi sonucu verir.
$(document).ready(function(){ ... });.load () çalışır, ancak sayfa yüklenene kadar beklemez.
jQuery(window).load(function () { ... });Benim için çalışmıyor, bir sonraki satır içi komut dosyasını kırar. Ayrıca bazı diğer jQuery çatal ile birlikte jQuery 3.2.1 kullanıyorum.
Web sitelerimi yükleme yer paylaşımını gizlemek için aşağıdakileri kullanıyorum:
<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");
});NOT: - Aşağıdaki biçimlendirmeyi kullanmayın (çünkü aynı türdeki diğer bildirimlerin üzerine yazılır):
document.onreadystatechange = ...Daniel'in dediği gibi document.onload kullanabilirsiniz.
Çeşitli javascript çerçeveleri hwoever (jQuery, Mootools, vb.) Özel bir olay 'domready' kullanıyor, ki bu daha etkili olmalı. Javascript ile geliştiriyorsanız, bir çerçeveden yararlanmanızı şiddetle tavsiye ederim, üretkenliğinizi büyük ölçüde artırırlar.
<script type="text/javascript">
$(window).bind("load", function() {
// your javascript event here
});
</script>Benim asnyckomut dosyası etiketi için tavsiye özelliğini kullanıyorum , bu sayfa yüklendikten sonra harici komut dosyalarını yüklemenize yardımcı olur
<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>deferBunun yerine, @Daniel Price'ın bahsettiği gibi demek istediniz?
kendi kendine yürütme onload fonksiyonunu kullan
window.onload = function (){
/* statements */
}(); onloadBu yaklaşımı kullanarak diğer işleyicileri geçersiz kılabilirsiniz . Bunun yerine dinleyici eklemelisiniz.