JavaScript window.onload
ve jQuery'nin $(document).ready()
yöntemi arasındaki farklar nelerdir ?
$().ready()
, zaman window.onload
zaman çalışmasını sağlıyor.
JavaScript window.onload
ve jQuery'nin $(document).ready()
yöntemi arasındaki farklar nelerdir ?
$().ready()
, zaman window.onload
zaman çalışmasını sağlıyor.
Yanıtlar:
ready
HTML belgesi yüklendikten sonra ise olay meydana onload
tüm içerik (örneğin görüntü) da yüklendiğinde olayı, sonradan ortaya çıkar.
onload
İse olay, DOM standart olaydır ready
olay jQuery özgüdür. Etkinliğin amacı ready
, belge yüklendikten sonra olabildiğince erken gerçekleşmesi gerektiğinden, sayfadaki öğelere işlevsellik ekleyen kodun tüm içeriğin yüklenmesini beklemesi gerekmez.
ready
Olay olduğu jQuery özgü. DOMContentLoaded
Tarayıcıda mevcutsa olayı kullanıyor , aksi takdirde taklit ediyor. DOMContentLoaded
Etkinlik tüm tarayıcılarda desteklenmediğinden DOM'da tam bir eşdeğer yoktur .
onload
. olay tetiklendiğinde onload
çağrılacak bir işlevi saklayan bir nesne özelliğinin adıdır load
.
window.onload
yerleşik JavaScript etkinliğidir, ancak uygulaması tarayıcılarda (Firefox, Internet Explorer 6, Internet Explorer 8 ve Opera ) ince tuhaflıklar yaşadığı için jQuery, bunları ortadan kaldırır ve sayfanın DOM'u hazır olur olmaz tetiklenir (resimler vb. için beklemez).document.ready
$(document).ready
( undefined olmayan document.ready
bir jQuery işlevi olduğunu unutmayın ), aşağıdaki olayları sararak ve tutarlılık sağlar:
document.ondomcontentready
/ document.ondomcontentloaded
- belgenin DOM'si yüklendiğinde ( resimler vb. yüklenmeden önce biraz zaman geçebilir) tetiklenen yeni bir olay ; yine, Internet Explorer'da ve dünyanın geri kalanında biraz farklıwindow.onload
(eski tarayıcılarda bile uygulanır), tüm sayfa yüklendiğinde tetiklenen (resimler, stiller vb.)load
olayı window
tarayıcılar arasında makul bir şekilde tutarlı bir şekilde uygulanmaktadır. JQuery ve diğer kitaplıkların çözmeye çalıştığı sorun, bahsettiğiniz load
sorudur; bu, DOM tamamen yüklendikten uzun bir süre sonra olabilecek resim ve stil sayfaları gibi tüm bağımlı kaynaklar yüklenene kadar etkinliğin tetiklenmemesi, render ve etkileşim için hazır. DOM hazır olduğunda çoğu tarayıcıda tetiklenen olay çağrılır DOMContentLoaded
, çağrılmaz DOMContentReady
.
onload
(FF / IE / Opera ile farklılıklar var). Gelince DOMContentLoaded
, tamamen haklısın. Açıklığa kavuşturmak için düzenleme.
document.onload
için kullanılabilir). Window.onload gittikçe: window.onload = fn1;window.onload=fn2;
- sadece fn2 yüklenirken çalıştırılır. Bazı ücretsiz web barındırıcıları belgelere kendi kodlarını ekler ve bazen bu sayfa içi kodu zorlar.
$(document).ready()
bir jQuery olayıdır. JQuery'nin $(document).ready()
yöntemi DOM hazır olur olmaz çağrılır (bu, tarayıcının HTML'yi ayrıştırdığı ve DOM ağacını oluşturduğu anlamına gelir). Bu, belge manipüle edilmeye hazır olur olmaz kodu çalıştırmanızı sağlar.
Örneğin, bir tarayıcı DOMContentLoaded olayını destekliyorsa (IE olmayan birçok tarayıcıda olduğu gibi), o olayda tetiklenir. (DOMContentLoaded olayının yalnızca IE9 + 'da IE'ye eklendiğini unutmayın.)
Bunun için iki sözdizimi kullanılabilir:
$( document ).ready(function() {
console.log( "ready!" );
});
Veya steno versiyon:
$(function() {
console.log( "ready!" );
});
Ana noktalar $(document).ready()
:
$
ile jQuery
aldığınızda "$ tanımlı değil."$(window).load()
Bunun yerine kullanın . window.onload()
yerel bir JavaScript işlevidir. window.onload()
DOM (Belge nesne modeli), afiş reklamları ve görüntüler dahil sayfadaki tüm içeriği yüklendikten olay patlar. İkisi arasındaki bir diğer fark, birden fazla $(document).ready()
fonksiyona sahip olsak da, sadece bir onload
fonksiyona sahip olabilmemizdir .
DOM (belge nesnesi modeli) içeriği ve eşzamansız JavaScript , çerçeveler ve resimler dahil olmak üzere, sayfanızdaki tüm içerik tamamen yüklendiğinde bir Windows yükleme olayı tetiklenir . Gövde onload = işlevini de kullanabilirsiniz. Her ikisi de aynı; ve aynı etkinliği kullanmanın farklı yollarıdır.window.onload = function(){}
<body onload="func();">
jQuery$document.ready
işlevi olayı window.onload
, sayfanızdan DOM (Belge nesne modeli) yüklendikten biraz önce yürütülür ve çağrılır. Görüntülerin, çerçevelerin tamamen yüklenmesini beklemez .
Aşağıdaki makaleden alınmıştır:
nasıl $document.ready()
farklıdır?window.onload()
$(document).ready(function() {
// Executes when the HTML document is loaded and the DOM is ready
alert("Document is ready");
});
// .load() method deprecated from jQuery 1.8 onward
$(window).on("load", function() {
// Executes when complete page is fully loaded, including
// all frames, objects and images
alert("Window is loaded");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
$(document).ready()
Internet Explorer ile kullanırken dikkat edilmesi gereken bir kelime . Tüm belge yüklenmeden önce bir HTTP isteği kesilirse (örneğin, bir sayfa tarayıcıya akış yaparken başka bir bağlantı tıklanır) IE,$(document).ready
olayı .
$(document).ready()
Olay içindeki herhangi bir kod DOM nesnelerine başvuruyorsa, bu nesnelerin bulunma olasılığı vardır ve Javascript hataları oluşabilir. Ya bu nesnelere olan referanslarınızı koruyun ya da bu nesnelere window.load olayına başvuran kodu erteleyin.
Bu sorunu diğer tarayıcılarda (özellikle Chrome ve Firefox) yeniden oluşturamadım
window.addEventListener
Pencereye etkinlik eklemek için her zaman öğesini kullanın . Çünkü kodu farklı olay işleyicilerinde yürütebilirsiniz.
Doğru kod:
window.addEventListener('load', function () {
alert('Hello!')
})
window.addEventListener('load', function () {
alert('Bye!')
})
Geçersiz kod:
window.onload = function () {
alert('Hello!') // it will not work!!!
}
window.onload = function () {
alert('Bye!')
}
Bunun nedeni onload'un üzerine yazılan nesnenin bir özelliği olmasıdır.
Buna benzer şekilde addEventListener
, $(document).ready()
yükten ziyade kullanmak daha iyidir.
$(document).on('ready', handler)
jQuery'den hazır etkinliğe bağlanır. İşleyici DOM yüklendiğinde çağrılır . Resimler gibi varlıklar hala eksik olabilir . Belge ciltleme sırasında hazırsa asla çağrılmaz. jQuery, DOMContentLoaded -Event öğesini kullanır ve kullanılamıyorsa öykünür .
$(document).on('load', handler)
sunucudan tüm kaynaklar yüklendikten sonra tetiklenecek bir olaydır . Görüntüler şimdi yüklendi. İken onload ham HTML olay olduğunu hazır jQuery tarafından inşa edilmiştir.
$(document).ready(handler)
aslında bir vaattir . Arama sırasında belge hazır olduğunda işleyici derhal çağrılacaktır. Aksi takdirde ready
-Olay'a bağlanır .
JQuery 1.8'den önce , $(document).load(handler)
bir takma ad olarak vardı $(document).on('load',handler)
.
$.fn.load
bununla karıştın, artık olay bağlayıcı olarak davranmıyor. Aslında, jquery 1.8'den beri kullanılmıyor. Buna göre güncelledim
$(document).ready()
Bir olan jQuery iken, HTML belgesi tamamen yüklendiğinde oluşur olay window.onload
sayfasındaki herşey dahil görüntüleri yüklendiğinde olayı, sonradan ortaya çıkar.
Ayrıca window.onload DOM'da saf bir javascript olayı iken, $(document).ready()
olay jQuery'de bir yöntemdir.
$(document).ready()
jQuery için kullanılan tüm öğelerin jQuery'de kullanıldığından emin olmak için genellikle sarıcıdır ...
Nasıl çalıştığını anlamak için jQuery kaynak koduna bakın:
jQuery.ready.promise = function( obj ) {
if ( !readyList ) {
readyList = jQuery.Deferred();
// Catch cases where $(document).ready() is called after the browser event has already occurred.
// we once tried to use readyState "interactive" here, but it caused issues like the one
// discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
if ( document.readyState === "complete" ) {
// Handle it asynchronously to allow scripts the opportunity to delay ready
setTimeout( jQuery.ready );
// Standards-based browsers support DOMContentLoaded
} else if ( document.addEventListener ) {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", completed, false );
// A fallback to window.onload, that will always work
window.addEventListener( "load", completed, false );
// If IE event model is used
} else {
// Ensure firing before onload, maybe late but safe also for iframes
document.attachEvent( "onreadystatechange", completed );
// A fallback to window.onload, that will always work
window.attachEvent( "onload", completed );
// If IE and not a frame
// continually check to see if the document is ready
var top = false;
try {
top = window.frameElement == null && document.documentElement;
} catch(e) {}
if ( top && top.doScroll ) {
(function doScrollCheck() {
if ( !jQuery.isReady ) {
try {
// Use the trick by Diego Perini
// http://javascript.nwbox.com/IEContentLoaded/
top.doScroll("left");
} catch(e) {
return setTimeout( doScrollCheck, 50 );
}
// detach all dom ready events
detach();
// and execute any waiting functions
jQuery.ready();
}
})();
}
}
}
return readyList.promise( obj );
};
jQuery.fn.ready = function( fn ) {
// Add the callback
jQuery.ready.promise().done( fn );
return this;
};
Ayrıca aşağıdaki resim her ikisi için hızlı bir referans olarak oluşturduk:
window.onload: Normal bir JavaScript etkinliği.
document.ready: HTML'nin tamamı yüklendiğinde belirli bir jQuery olayı.
Hatırlanması gereken bir şey (ya da hatırlama demem gerekir), onload
s'yi olabildiğince istifleyememenizdir ready
. Başka bir deyişle, jQuery magic ready
aynı sayfada birden fazla s'ye izin verir , ancak bunu ile yapamazsınız onload
.
Sonuncusu onload
önceki s'leri geçersiz kılacaktır onload
.
Bununla başa çıkmanın güzel bir yolu, bir Simon Willison tarafından yazılan ve Birden Fazla JavaScript Onload İşlevini Kullanma bölümünde açıklanan bir işlevdir .
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
// Example use:
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
/* More code to run on page load */
});
Document.ready
(jQuery olayı) tüm öğeler yerinde olduğunda tetiklenir ve JavaScript kodunda bunlara başvurulabilir, ancak içerik zorunlu olarak yüklenmez. Document.ready
HTML belgesi yüklendiğinde yürütülür.
$(document).ready(function() {
// Code to be executed
alert("Document is ready");
});
window.load
Sayfa tamamen yüklenecek için ancak bekleyecektir. Buna iç çerçeveler, görüntüler vb. Dahildir.
$(window).load(function() {
//Fires when the page is loaded completely
alert("window is loaded");
});
Document.ready olayı, HTML belgesi yüklendiğinde ve window.onload
olay her zaman daha sonra, tüm içerik (resimler vb.) Yüklendiğinde gerçekleşir.
document.ready
Görüntülerin yüklenmesini beklemeden oluşturma işlemine "erken" müdahale etmek istiyorsanız olayı kullanabilirsiniz . Komut dosyanız "bir şey" yapmadan önce resimlere (veya başka herhangi bir "içeriğe") ihtiyacınız varsa,window.onload
.
Örneğin, bir "Slayt Gösterisi" deseni uyguluyorsanız ve resim boyutlarına göre hesaplamalar yapmanız gerekiyorsa, tarihine kadar beklemek isteyebilirsiniz window.onload
. Aksi takdirde, görüntülerin ne kadar hızlı yükleneceğine bağlı olarak bazı rastgele sorunlar yaşayabilirsiniz. Betiğiniz, görüntüleri yükleyen iş parçacığıyla aynı anda çalışıyor olacaktır. Betiğiniz yeterince uzunsa veya sunucu yeterince hızlıysa, görüntüler zamanında geldiyse bir sorun fark etmeyebilirsiniz. Ancak en güvenli uygulama görüntülerin yüklenmesine izin vermek olacaktır.
document.ready
kullanıcılara bazı "yükleniyor ..." işaretini göstermeniz için iyi bir etkinlik window.onload
olabilir ve daha sonra, kaynakların yüklenmesi gereken tüm komut dosyalarını tamamlayabilir ve son olarak "Yükleniyor ..." işaretini kaldırabilirsiniz.
Örnekler: -
// document ready events
$(document).ready(function(){
alert("document is ready..");
})
// using JQuery
$(function(){
alert("document is ready..");
})
// window on load event
function myFunction(){
alert("window is loaded..");
}
window.onload = myFunction;
window.onload
bir JavaScript dahili işlevidir. window.onload
HTML sayfası yüklendiğinde tetiklenir. window.onload
yalnızca bir kez yazılabilir.
document.ready
jQuery kütüphanesinin bir fonksiyonudur. document.ready
HTML ve HTML dosyasında bulunan tüm JavaScript kodu, CSS ve resimler tamamen yüklendiğinde tetiklenir.
document.ready
Gereksinimlere göre birden çok kez yazılabilir.
Söylediğinizde $(document).ready(f)
, komut dosyası motoruna aşağıdakileri yapmasını söylersiniz:
$
ve seçin, çünkü yerel kapsamda olmadığı için, çarpışmalara sahip olan veya olmayan bir karma tablo araması yapmalıdır.ready
yöntem bulmak ve çalıştırmak için seçilen nesnenin içine bir karma tablosu arama içeren seçilen nesnenin.En iyi durumda, bu 2 karma tablo aramalarıdır, ancak jQuery $
için olası tüm girişlerin mutfak lavabosu olan jQuery tarafından yapılan ağır işi görmezden gelir , bu nedenle başka bir harita sorguyu düzeltmek için doğru işleyiciyi gönderir.
Alternatif olarak, bunu yapabilirsiniz:
window.onload = function() {...}
hangisi
onload
karma tablo araması yaparak bir özellik olup olmadığını kontrol edin , çünkü bir işlev gibi çağrılır.En iyi durumda, bu getirilmesi gereken tek bir karma tablo aramaya mal olur, bu da getirilmesi onload
gerekir.
İdeal olarak, jQuery, sorgularını jQuery'nin yapmasını istediğiniz şeyi yapmak için yapıştırılabilecek dizelere derlerdi, ancak jQuery'in çalışma zamanı gönderilmeden. Bu şekilde,
eval
.window.onload DOM api tarafından sağlanır ve "belirli bir kaynak yüklendiğinde load olayı tetiklenir" der.
"Load olayı belge yükleme işleminin sonunda tetiklenir. Bu noktada, belgedeki tüm nesneler DOM'dadır ve tüm resimler, komut dosyaları, bağlantılar ve alt çerçevelerin yüklenmesi tamamlanmıştır." DOM yüklemesi
Ancak jQuery $ (document) .ready () yalnızca Belge Nesne Modeli (DOM) sayfasının JavaScript kodunun yürütülmesine hazır olması durumunda çalışır. Bu, resimleri, komut dosyalarını, iframe'leri vb. İçermez. Jquery hazır olayı
Böylece jquery ready yöntemi dom onload olayından daha önce çalışacaktır .