Səhifənin yüklənməsindən sonra işləyən Javascript

<script> içində <head> istifadə edərək, xarici bir skript <script> .

İndi script qədər icra edildikdə, səhifə yükləndi, mən də bu şəkildə <body> daxil ola bilmirəm. Sənədin "yüklənmiş" olduqdan sonra bir neçə javascript icra etmək istərdim (HTML tamamilə RAM-yə yükləndi). Ssenarilərin yükləndiyi zaman əlaqə saxlaya biləcəyim bir hadisə varmı?

487
30 апр. 30 Martda Robin Rodricks tərəfindən təyin olundu 2009-04-30 19:38 '09 da 19:38 'da 2009-04-30 19:38
@ 24 cavab

Bu həllər işləyəcək:

 <body onload="script();"> 

və ya

 document.onload = function ... 

ya da hətta

 window.onload = function ... 

Xahiş edirik sonuncu variantın ən yaxşı yolu olduğuna diqqət çəkin , çünki qeyri- səmimiliyi daha standart sayılır .

557
30 апр. Cavab marcgg tərəfindən verilir 30 Apr 2009-04-30 19:41 '09 at 19:41 'da 2009-04-30 19:41

Boot zamanı bir funksiyaya başlamaq üçün scriptdən istifadə etmək üçün əsaslı portativ, qeyri-çərçivəli bir üsul:

border=0
 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; } } 
165
30 апр. Cavab xaos verilir 30 Apr 2009-04-30 19:59 '09 da 19:59 'da 2009-04-30 19:59

Bədənin içərisində "onload" xüsusiyyətini qoya bilərsiniz

 ...<body onload="myFunction()">... 

Və ya jQuery istifadə etsəniz, edə bilərsiniz

 $(document).ready(function(){  }) or $(window).load(function(){  }) 

Ümid edirəm o sizin sualınıza cavab verəcəkdir.

Qeyd edək ki, sənəd, səhifənizdə göstərildikdən sonra $ (window) .load yüklənəcəkdir.

104
30 апр. Apres tərəfindən verilmiş cavab 30 apreldə 2009-04-30 19:42 '09 da 7:42 pm 2009-04-30 19:42

Bir səhifə yüklənməsinin birdən çox mərhələdən ibarət olduğunu unutmayın. Btw, bu, təmiz javascript

"DOMContentLoaded"

Bu hadisə, qaynaq HTML sənədinin yüklənmə tamamlanması üçün üslub, görünüş və subframların tamamlanmasını gözləmədən tamamilə yükləndiyi və təhlil edildiyi zaman tetiklenir. Bu mərhələdə, istifadəçi qurğusuna və ya bant genişliyinə əsaslanan şəkillərin və css yüklənməsini programlı şəkildə optimize edə bilərsiniz.

DOM yüklənməsindən sonra ekspires (img və css-ə qədər):

 document.addEventListener("DOMContentLoaded", function(){ //.... }); 

Qeyd Sinxron JavaScript, DOM ayrılmasını dayandırır. İstifadəçi bir səhifə tələb etdikdən sonra DOM-nun mümkün qədər tez ayrılmasını istəyirsinizsə, asinxronlaşdırıcı JavaScript- ni aktivləşdirəstillərin yüklənməsini optimallaşdıra bilərsiniz.

"yük"

Çox müxtəlif yük hadisəsi yalnız tam yüklənmiş səhifəni aşkar etmək üçün istifadə olunmalıdır. DOMContentLoaded'in daha uyğun olacağı yükün istifadə edilməsində inanılmaz dərəcədə populyar bir səhvdir, buna görə diqqətli olun.

Yüklənmə və təhlili aparıldıqdan sonra ekspluatasiyalar:

 window.addEventListener("load", function(){ // .... }); 

MDN resursları:

https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/load

Bütün MDN tədbirlərinin siyahısı:

https://developer.mozilla.org/en-US/docs/Web/Events

57
19 марта '16 в 3:50 2016-03-19 03:50 Cavab DevWL 19 Mart 'da 3:50 2016-03-19 03:50' da verilir

Komutlar sənəddə <head> sənədinə yüklənirsə, onda skript etiketi üçün atributu istifadə etmək mümkündür.

Məsələn:

 <script src="demo_defer.js" defer></script> 

Https://developer.mozilla.org ünvanından :

Move

Bu Boolean xüsusiyyət, brauzerin sənədin analiz edildikdən sonra icra ediləcəyini, lakin DOMContentLoaded başlamasından əvvəl göstərməsini təyin etmək üçün təyin edilir.

Src öznitelik eksikse (yani gömülü komutlar üçün) bu atributdan istifadə edilməməlidir, bu halda heç bir təsiri olmayacaqdır.

Async = yalan yerinə dinamik olaraq yerləşdirilən skriptlər üçün bənzər bir təsir əldə etmək. Sənəddə göstərildiyi sırada, təxirə salma xüsusiyyətləri olan skriptlər icra olunacaq.

38
10 янв. Cavab Daniel Qiymət Jan 10 verilir 2014-01-10 11:52 '14 at 11:52 AM 2014-01-10 11:52

Burada səhifə yükləndikdən sonra js təxirə salınmış yükləmə əsasında bir skript,

 <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> 

Harada yerləşmək lazımdır?

</body> (HTML dosyanızın altındakı) əvvəl HTML kodunu birbaşa yapışdırın.

O nə edir?

Bu kod, bütün sənədin yüklənməsini gözləməyi və daha sonra xarici deferredfunctions.js faylını yükləməyi deyir.

Yuxarıda göstərilən kodun nümunəsi - JS Rendering Postpone

Bunu google səhifə üslubunda təxirə salınmış javascript loading və bu yazıdan da yazdım. Delay javascript loading

21
05 февр. Cavab Lucky 05 fevralda verilir. 2013-02-05 15:40 '13 saat 03:40 'da 2013-02-05 15:40

Bağlantı document.onload və ya jQuery $(document).load(...) .

20
30 апр. Cavab Daniel A. Ağ May 30 2009-04-30 19:40 '09 da 19:40 'da 2009-04-30 19:40

Google tərəfindən ən yaxşı şəkildə təklif olunur :)

 <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

6
11 сент. Cavab Frankey tərəfindən 11 sentyabrda verilir . 2014-09-11 22:23 '14 saat 10:23 'da 2014-09-11 22:23

Çalışan script

 <!DOCTYPE html> <html> <head> <script> function myFunction() { alert("Page is loaded"); } </script> </head> <body onload="myFunction()"> <h1>Hello World!</h1> </body> </html> 
6
26 марта '13 в 12:39 2013-03-26 12:39 Cavab Aamir Şahzad tərəfindən 26 Mart '13 'də saat 12:39' də verilir. 2013-03-26 12:39
 document.onreadystatechange = function(){ if(document.readyState === 'complete'){  } } 

buraya baxın: http://msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx

4
11 сент. Cavab 11 sentyabrda Arthur tərəfindən verilir . 2014-09-11 14:41 '14 da 14:41 2014-09-11 14:41
 <body onload="myFunction()"> 

Bu kod yaxşı işləyir.

Lakin window.onload metodu müxtəlif bağımlılıklara malikdir. Buna görə də hər zaman işləməyəcək.

4
29 апр. cavab Akarsh Satija verilir 29 Apr 2013-04-29 14:32 '13 at 14:32 2013-04-29 14:32

JQuery istifadə edirsinizsə,

$(function() {...});

bərabərdir

$(document).ready(function () { })

Hansı hadisə jQuery funksiyasını $ function () ilə idarə edir?

4
06 марта '13 в 23:39 2013-03-06 23:39 Cavab Benjamin Crouzier tərəfindən martın 06-da saat 11: 37-da verilir. 2013-03-06 23:39

<body onload="aFunction()"> sonra çağırılacak olan <body onload="aFunction()"> . aFunction() { } .

4
30 апр. Norbert Hartl tərəfindən verilmiş cavabı Apr 30 2009-04-30 19:41 '09 at 19:41 'da 2009-04-30 19:41

Bir sənədin Javascript və ya JQuery istifadə edərək yüklənib olub-olmadığını müəyyənləşdirmək üçün çox yaxşı sənədlər var.

Öz javascriptinizi istifadə edərək, bunu əldə edə bilərsiniz

 if (document.readyState === "complete") { init(); } 

Bu da bir müddət içində edilə bilər.

 var interval = setInterval(function() { if(document.readyState === 'complete') { clearInterval(interval); init(); } }, 100); 

Məsələn, Mozilla

 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; } 

DOM-nun hazır olduğu halda jQuery istifadə edin

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

Bütün resursların yükləndiyini yoxlamaq üçün window.load -dan istifadə edin

  $( window ).load(function() { console.log( "window loaded" ); }); 
3
12 дек. Cavab user5642061 tərəfindən verilir 12 dekabr. 2015-12-12 11:42 '15 'da 11:42' de, 2015-12-12 11:42

YUI Kitabxanasından istifadə et (mən onu sevirəm):

 YAHOO.util.Event.onDOMReady(function(){ //your code }); 

Portativ və gözəl! Ancaq YUI'yi başqa şeylər üçün istifadə etmirsinizsə (onun sənədini görsən), mən onu istifadə etməməlisən deyirəm.

NB: bu kodu istifadə etmək üçün 2 skript idxal etmək lazımdır

 <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> 
3
30 апр. Apr 30-də Valentin Jacquemin tərəfindən verilmiş cavab 2009-04-30 20:36 '09 da 20:36 'de 2009-04-30 20:36

Mən bəzən window.onload tərəfindən yüklənən bütün elementləri olmayan daha mürəkkəb səhifələrdə özümü tapıram. Əgər belədirsə, funksiyanı əvvəlcədən gecikdirmədən setTimeout əlavə edin. Zərif deyil, amma yaxşı görünən sadə bir hack.

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

olur ...

 window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); }; 
3
21 июля '13 в 0:13 2013-07-21 00:13 cavab Çarlz Jaimet tərəfindən 21 İyul '13 'də 0:13 2013-07-21 00:13' də verilir

2
29 сент. Vô Vị tərəfindən verilmiş cavab 29 Sep. 2015-09-29 11:43 '15 at 11:43 2015-09-29 11:43

Mənim məsləhətlər səhifə yükləndikdən sonra xarici skriptləri yükləməyə kömək edəcək script tag üçün asnyc xüsusiyyətindən istifadə etməkdir.

 <script type="text/javascript" src="a.js" async></script> <script type="text/javascript" src="b.js" async></script> 
2
30 марта '15 в 8:43 2015-03-30 08:43 Cavab Kali Dass 30 mart 2015-ci ildə saat 08:43 da verilir

Bu kodu jQuery kitabxanası ilə istifadə edin, yaxşı işləyəcəkdir.

1
21 дек. Cavab Hariş Kumar 21 dekabrda verilir. 2017-12-21 16:32 '17 'də 16:32' də 2017-12-21 16:32 'də

Daniel deyir ki, document.onload istifadə edə bilərsiniz.

Müxtəlif javascript strukturları (jQuery, Mootools, və s.) "Effektiv" olması lazım olan xüsusi tədbirdən istifadə edir, daha effektiv olmalıdır. Javascript inkişaf edirsinizsə, mən çərçivəni istifadə etməyi məsləhət görürəm, onlar performansını əhəmiyyətli dərəcədə artıracaqlar.

1
30 апр. Iain tərəfindən verilmiş cavab 30 apreldə 2009-04-30 19:47 '09 at 07:47 PM 2009-04-30 19:47

$ (window) .on ("yük", funksiya () {...});

Mənim üçün ən yaxşı işləyir.

 $(document).ready(function(){ ... } 

Bu işləyəcək, ancaq səhifənin yüklənməsini gözləmək olmaz.

 jQuery(window).load(function () { ... } 

Mənim üçün işləmir, yeni inşa edilən scripti pozur. Digər jQuery widget'ları ilə birlikdə jQuery 3.2.1 də istifadə edirəm.

Sitemlerin yüklenmesini gizlətmək üçün aşağıdakıları istifadə edin:

 <script> $(window).on("load", function(){ $('.loading-page').delay(3000).fadeOut(250); }); </script> 
1
08 марта '18 в 5:42 2018-03-08 05:42 cavab Zach Reynolds 08 mart '18 saat 05:42 2018-03-08 05:42 'də verilir

öz yük yüklənmə funksiyasından istifadə edin

 window.onload = function (){  }(); 
0
19 февр. İstifadəçi 7087840 tərəfindən 19 Fevralda verilən cavabı 2018-02-19 18:59 '18 saat 18:59 'da 2018-02-19 18:59

Sizin üçün olan jQuery sarmalayıcılar. Yəqin ki, bu asan həll tapacaqsınız.

0
30 апр. Apr 30-da Josh tərəfindən verilmiş cavab 2009-04-30 19:42 '09 da 7:42 pm 2009-04-30 19:42

// Test edilmiş və işləmişdir :)

$ (sənəd) .ready (function () {functon1 (); function2 ()});

-3
21 мая '09 в 13:09 2009-05-21 13:09 cavab 21 may 09: 09-da Kedar tərəfindən verilmişdir 13:09 2009-05-21 13:09

tags ilə bağlı digər suallar və ya bir sual