Window.onload vs $ (document) .ready ()

1121
13 сент. 13 sentyabrda Vaibhav Jain tərəfindən təyin olundu 2010-09-13 09:24 '10 saat 09:24 'da 2010-09-13 09:24
@ 16 cavab

ready hadisə HTML sənədini yüklədikdən sonra baş verir və bütün məzmunun (məsələn, şəkillərin) yükləndiyi zaman onload daha sonra baş verir.

onload DOM-da standart bir hadisədir və ready hadisə jQuery üçün xüsusi. ready tədbirin məqsədi sənədin yüklənməsindən sonra ən qısa müddətdə baş verməsi, belə ki, səhifənin elementlərinə funksionallıq əlavə edən bütün məzmunun yüklənməsini gözləmək zorunda deyildir.

1138
13 сент. Cavab Guffa 13 sep verilir . 2010-09-13 09:28 '10 at 9:28 2010-09-13 09:28

window.onload bir inline JavaScript hadisəsidir, lakin onun tətbiqi brauzerlərdə (Firefox, Internet 6, Internet Explorer 8 və Opera ) incə window.onload malik olduğundan jQuery document.ready təqdim edir və DOM səhifəsi hazır olduqda onları window.onload verir şəkilləri gözləmir və s.).

$(document).ready (bu document.ready deyil, yəni undefined deyil) qeyd edin, jQuery funksiyasıdır və aşağıdakı hadisələrlə uyğunluq təmin edir:

border=0
  • document.ondomcontentready / document.ondomcontentloaded bir DOM sənəd yüklənərkən tetiklenecek yeni bir hadisədir (şəkilləri yükləməzdən əvvəl bir müddət ala bilər); yenə Internet Explorer və dünyanın qalan hissəsində bir az fərqlənir
  • və bütün səhifə yüklənərkən başlayan window.onload (hətta daha eski brauzerlərdə tətbiq olunur) (şəkillər, üslublar və s.).
125
13 сент. Cavab 13 saylı Piskvor tərəfindən verilir . 2010-09-13 09:30 '10 saat 9:30 'da 2010-09-13 09:30

$(document).ready() jQuery hadisədir. JQuerys $(document).ready() .ready $(document).ready() metodu, DOM hazır olduqda (bu, brauzerin HTML analiz etdiyini və DOM ağacını tikdiyini bildirir) deyilir. Bu, sənədin işə hazır olduğu anda kodu çalıştırmanıza imkan verir.

Məsələn, brauzer DOMContentLoaded hadisəsini dəstəkləyirsə (bir çox qeyri-IE brauzeri yoxdur), bu hadisə tetikler. (Qeyd edək ki, DOMContentLoaded hadisə yalnız IE9 + da IE-də əlavə edilmişdir.)

Bunu etmək üçün iki sintaksis istifadə edə bilərsiniz:

 $( document ).ready(function() { console.log( "ready!" ); }); 

Və ya qısaldılmış versiya:

 $(function() { console.log( "ready!" ); }); 

$(document).ready() üçün əsas nöqtələr $(document).ready() :

  • Şəkil yükləməyi gözləməyəcək.
  • DOM tam yükləndikdə javascriptin yerinə yetirilməsi üçün istifadə olunur. Burada hadisə işləyicilərinə yer verin.
  • Bir neçə dəfə istifadə edilə bilər.
  • "$ Undefined" jQuery aldığınızda $ jQuery ilə dəyişdirin.
  • Şəkilləri manipulyasiya etmək istəyirsinizsə istifadə olunmur. Onun $(window).load() .

window.onload() doğma bir JavaScript funksiyasıdır. window.onload() hadisə, DOM (sənəd obyekti modeli), banner reklam və şəkillər daxil olmaqla, sayfanızdaki bütün içerik yüklendiğinde tetiklenir. İki ikisi arasındakı bir fərq isə, birdən çox $(document).ready() funksiyasına sahib olmasına baxmayaraq, yalnız onload funksiyasına sahib ola bilərik.

82
20 авг. 20 Avqustda James Drinkard tərəfindən verilmiş cavab 2013-08-20 19:00 '13 saat 19:00 'da 2013-08-20 19:00

Bir Windows yük hadisəsi, DOM məzmunu (sənəd obyekti modeli) və asynchronous JavaScript , çərçivələr və şəkillər də daxil olmaqla, sayfanızdaki bütün məzmun tam yükləndiyi zaman tetiklenir. Bədəninizi onload = istifadə edə bilərsiniz. Hər ikisi eynidır; window.onload = function(){}<body onload="func();"> eyni hadisədən istifadə etmək üçün müxtəlif üsullardır.

JQuery $document.ready funksiyası hadisə , window.onload dan bir az daha erkən çalışır və DOM obyekt obyekti (sənəd obyekti) səhifəsinə yüklənir kimi tezliklə çağırılır. Şəkillər, çərçivələr tam yüklənəcək qədər gözləməyəcək.

Aşağıdakı yazıdan götürülmüşdür: window.onload() dan necə $document.ready() window.onload()

41
17 сент. Cavab Vivek 17 sep verilir . 2013-09-17 10:09 '13 at 10:09 2013-09-17 10:09

Internet Explorer-da $(document).ready() istifadə etmə haqqında xəbərdarlıq. Bütün sənəd yüklənməmişdən əvvəl HTTP tələbi kəsildikdə (məsələn, səhifə brauzerə ötürülür, başqa bir link tıklanır) IE $(document).ready hadisə tetikler.

$(document).ready() içindəki hər hansı bir kod DOM obyektlərinə aiddirsə, bu obyektlərin tapılmaması üçün potensial var və Javascript səhvləri baş verə bilər. Bu obyektlərə keçidlərinizi qoruyun və ya bu obyektlərə window.load hadisəsinə istinad edən bir kənar kod qoyun.

Bu problemi digər brauzerlərdə (xüsusilə Chrome və Firefox) təkrarlaya bilmədi.

21
27 авг. cavab verilən veriliş 27 avqust. 2012-08-27 21:56 '12 saat 21:56 'da 2012-08-27 21:56

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
18
26 февр. Cavab verilir dev4092 26 fevral. 2014-02-26 15:30 '14 saat 15:30 'da 2014-02-26 15:30

Hadisələr

$(document).on('ready', handler) jQuery-dən hazır olan hadisə ilə bağlıdır. DOM yükləndiyi zaman operator işlədilir . Bu kimi aktivlər , ehtimal ki, əskikdir. . Sənəd bağlanma zamanı hazır olduqda heç vaxt çağırılmayacaq. jQuery DOMContentLoaded istifadə edir - Bunun üçün əlavəsi , mümkün olmadıqda onu təqlid edin.

$(document).on('load', handler) bütün resurslar serverdən yükləndikdən sonra tetiklenecek bir hadisədir. İndi şəkillər yüklənir. Onload yüklənməmiş HTML hadisəsi olsa da, jQuery tərəfindən hazırdır .

Funksiyalar

$(document).ready(handler) əsl bir sözdür . Çağırış zamanı sənəd hazır olduqda işəgötürən dərhal çağırılacaq. Əks halda, bu, ready .

JQuery 1.8 əvvəl $(document).load(handler) $(document).on('load',handler) bir alias kimi mövcuddur.

Əlavə ədəbiyyat

16
29 нояб. Cavab abstraktor 29 noyabrda verilir 2013-11-29 18:06 '13 at 18:06 2013-11-29 18:06

$(document).ready() , HTML sənədinin tam yükləndiyi zaman baş verən bir jQuery hadisəsidir və səhifədə olan şəkillər də daxil olmaqla, hər şey yükləndikdə window.onload hadisə daha sonra meydana gəlir.

Ayrıca window.onload DOM-da təmiz bir javascript hadisəsidir və $(document).ready() hadisə jQuery-də bir üsuldur.

$(document).ready() adətən jQuery-də bütün yüklənmiş elementlərin jQuery-də istifadə olunmasını təmin etmək üçün bir sarmalandır ...

Necə işlədiyini görmək üçün jQuery mənbə koduna baxı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; }; 

Hər ikisi üçün də bir qısa təsvir kimi aşağıdakı imicini də yaratdım:

2019

13 окт. Cavab Alireza 13 oktyabr. 2017-10-13 17:52 '17 saat 17:52 'də 2017-10-13 17:52

window.onload: Parlaq JavaScript hadisəsi.

document.ready: Bütün HTML kodu yükləndikdə xüsusi jQuery hadisə.

11
02 июня '13 в 13:38 2013-06-02 13:38 Cavab Amir Mehdi Delta tərəfindən 02 iyun '13 'də 13:38 2013-06-02 13:38' də verilir

Document.ready (jQuery hadisə) bütün elementlər olduqda yanır və JavaScript kodunda istinad edilə bilər, lakin məzmun mütləq yüklənmir. Document.ready bir HTML sənədini yükləyərkən çalışır.

 $(document).ready(function() { // Code to be executed alert("Document is ready"); }); 

Bununla belə, window.load tam səhifə yükünü gözləyir. Daxili çərçivələr, şəkillər və s. Daxildir.

 $(window).load(function() { //Fires when the page is loaded completely alert("window is loaded"); }); 
11
03 марта '15 в 9:52 2015-03-03 09:52 Cavab Mike Clark tərəfindən 03.03 'da 09:52' də verilir. 2015-03-03 09:52

Xatırlamaq üçün bir şey (ya da, demək lazımdır, xatırladır), ready onload mümkün deyildir. Başqa sözlə, jQuery sehrli eyni səhifədə bir neçə ready , ancaq onload ilə bunu edə bilməzsiniz.

Son onload əvvəlki onload ləğv edəcək.

Bunu həll etmək üçün yaxşı bir yol, bir Simon Willison tərəfindən yazılmış və "Yükləmək üçün birdən çox JavaScript funksiyasından istifadə" bölməsində təsvir olunmuş bir funksiyadır .

 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() {  }); 
10
07 нояб. Donald A Nummer Jr tərəfindən verilmiş cavab 07 Noyabr. 2013-11-07 23:54 '13 at 23:54 2013-11-07 23:54

Tövsiyə bir söz:

window.addEventListener bir hadisə əlavə etmək üçün həmişə window.addEventListener istifadə edin. Çünki bu şəkildə fərqli hadisə işleyicilerinde kodu icra edə bilərsiniz.

Doğru kod:

 window.onload = function () { alert('Hello!') // it will not work!!! } window.onload = function () { alert('Bye!') } 

Bunun səbəbi onloadun sadəcə yazılan obyektin mülkiyyətidir.

addEventListener ilə müqayisə addEventListener $(document).ready()addEventListener daha yaxşıdır.

5
02 сент. İlya Zelenko tərəfindən verilmiş cavab 02 sentyabr. 2018-09-02 18:26 '18 saat 06:26 'da 2018-09-02 18:26

Document.ready hadisə, HTML sənəd yüklənərkən baş verir və window.onload hadisə həmişə bütün məzmun yükləndikdə (şəkillər, və s.) Sonra meydana gəlir.

document.ready yüklənməsini gözləmədən, göstərmə prosesində "erkən" müdaxilə etmək istəyirsinizsə document.ready hadisəindən istifadə edə bilərsiniz. "Əgər bir şey etmək" skriptindən əvvəl hazır olan şəkilləri (və ya hər hansı digər məzmuna) ehtiyac window.onload qədər gözləyin.

Məsələn, Slideshow şablonunu istifadə etsəniz və şəkillərin ölçüsünə əsasən hesablamaları yerinə yetirməlisinizsə, window.onload üçün window.onload . Əks təqdirdə, təsvirlərin yüklənməsinin nə qədər sürətli olacağına bağlı olaraq bəzi təsadüfi problemlərlə qarşılaşa bilərsiniz. Ssenariniz şəkilləri yükləyən axınla eyni vaxtda işləyəcək. Ssenariniz kifayət qədər uzunsa və ya server kifayət qədər sürətli olsa, şəkillər vaxtında baş verərsə, problem olmaya bilər. Amma ən təhlükəsiz tətbiq şəkilləri yükləməyə imkan verəcəkdir.

document.ready xoş bir hadisə ola bilər ki, istifadəçilərə "loading ..." bir növ göstərə bilərsiniz və window.onload istifadə edərək window.onload resursları lazım olan hər hansı bir skript doldurmaq və sonra nəhayət silə bilərsiniz "Loading ..." işarəsi.

Nümunələr: -

 // 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; 
4
16 мая '16 в 13:37 2016-05-16 13:37 cavab Nimesh khatri tərəfindən verilir 16 may '16 saat 13:37 2016-05-16 13:37

window.onload daxili JavaScript funksiyasıdır. Bir HTML səhifə yüklənərkən window.onload . window.onload yalnız bir dəfə yazıla bilər.

document.ready bir jQuery kitabxana funksiyasıdır. HTML və bütün JavaScript kodu, CSS və HTML faylına daxil edilmiş şəkillər tam yükləndiğinde document.ready tetikler. document.ready tələb olunan bir neçə dəfə yazıla bilər.

2
24 июня '14 в 12:46 2014-06-24 12:46 cavab 24 iyun, '14 'də saat 12:46' də verilir. 2014-06-24 12:46

$(document).ready(f) deyərkən, skript motoruna aşağıdakıları bildirirsiniz:

  1. obyektin sənədini almaq və onu basın, çünki o, yerli sahədə olmadığı üçün sənədin harada yerləşdiyini tapmaq üçün xaş cədvəlini axtarmaq lazımdır, xoşbəxtlikdən, sənəd qlobal olaraq bağlıdır, belə ki, tək axtarışdır.
  2. $ obyektini tapın və onu seçin, çünki o, yerli sahədə olmadıqda, toqquşmalara səbəb ola biləcək və ya olmaya biləcək bir hash masasını axtarmaq lazımdır.
  3. hash masasında başqa bir axtarış olan qlobal miqyasda obyekt f tapın və ya funksiyanı obyektə vurun və onu başladın.
  4. Seçilən obyektin hazırlanmasını çağırırıq, bu da seçilmiş obyektdə hash masasının başqa bir axtarışını, metodu tapmaq və çağırmaqdır.
  5. tərəfindən hazırlanmışdır

Ən yaxşı halda, bunlar iki hash-masa axtarışlarıdır, lakin bu, jQuery-nin etdiyi hər hansı bir işi məhdudlaşdırır, burada $ , mümkün olan jQuery girişlərinin mətbəx sinkidir, buna görə də digər kart prosessorun təyin edilməsi üçün bir tələb göndərəcəkdir.

Alternativ olaraq, aşağıdakıları edə bilərsiniz:

 window.onload = function() {...} 

hansı olacaq

  1. qlobal miqyasda obyektin pəncərəsini tapsın, JavaScript optimallaşdırıldığında, pəncərə dəyişməzdən əvvəl, bir obyekt seçdiyindən biləcəkdir, buna görə heç bir şey yoxdur.
  2. funksiya obyekti operand yığınına yerləşdirilir.
  3. hash masasında axtarış onload əmlak olub-olmadığını yoxlayın, buna görə də funksiya kimi adlanır.

Ən yaxşı halda, yük yükünə ehtiyacı olduğu üçün lazım olan hash masasının bir axtarışına ehtiyac var.

İdeal olaraq, jQuery, jQuery-ə lazım olanları etmək üçün əlavə edə biləcəyiniz strings-a sorgularınızı tərtib edəcək, lakin jQuery-in işləməyində göndərilmədən. Beləliklə, ya da seçiminiz var

  1. Bu gün etdiyimiz kimi jquery dinamik göndərilməsi.
  2. jQuery sorgunuzu tərtib etmək istədiyiniz bir şeyi qiymətləndirmək üçün qiymətləndirilə bilən təmiz javascript simvolunu tərtib edir.
  3. nəticəni 2 eval birbaşa kopyalayın və eval dəyərini eval .
0
30 нояб. Cavab Dmitry 30 noyabrda verilir. 2017-11-30 20:28 '17 saat 20:28 'da 2017-11-30 20:28

DOM yükləndikdən sonra, jQuery hadisə document.ready () işə salınacaq, yəni. şəkillər kimi resursların endirilməsini gözləməyəcək. Nəticədə, jQuery hazır olan fəaliyyətdə funksiyalar resursları gözləmədən HTML strukturunu yüklədikdən sonra həyata keçiriləcəkdir. İndiyə qədər body.onload () hadisə, bütün əlaqədar qaynaq və şəkillər tam yükləndikdən sonra tetiklenecektir.

Bitmiş tədbirin məqsədi sənədin yüklənməsindən ən qısa müddətdə görünməlidir ki, bütün səhifənin yüklənməsini gözləmədən html elementlərinə funksionallıq və ya hadisə işləyicilərini dərhal əlavə edə bilərik. Sayfada bir neçə document.ready () var, lakin Body.Onload () hadisə ola bilməz.

0
03 дек. Cavab Rajesh 03 Dec tərəfindən verilir . 2018-12-03 07:37 '18 də 7:37 'də 2018-12-03 07:37' də

tags ilə bağlı digər suallar or Question