Window.onload vs document.onload

Daha geniş dəstəklənən şey: window.onload və ya document.onload ?

508
26 февр. Chris Ballance tərəfindən 26 Fevralda təyin olundu 2009-02-26 00:45 '09 da 0:45 'da 2009-02-26 00:45
@ 9 cavab

window.onload

Onlar nə vaxt işləyirlər?

window.onload

  • Varsayılan olaraq, məzmunu (şəkillər, css, skriptlər, və s.) Daxil olmaqla, bütün səhifənin yükləndiyi zaman başlayır.
  • Bəzi brauzerlərdə, indi document.onload rolunu tutur və DOM da hazır olduqda tetiklenir.

document.onload

  • DOM hazır olduqda, şəkillər və digər xarici məzmunların yüklənməsindən əvvəl ola bilər.

Onlar necə dəstəklənir?

window.onload ən geniş şəkildə dəstəklənir. Əslində, ən müasir brauzerlərdən bəziləri window.onload ilə document.onload əvəzinə bir mənada var. Brauzer dəstəyi ilə bağlı problemlər, bir çox insanın jQuery kimi kitabxanalardan istifadə etməyə başlamasının əsas səbəbi bu kimi sənəd hazırlığı yoxlamalarını idarə etməkdir:

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

Hekayənin məqsədləri üçün:

window.onload vs body.onload

Bir qeyd olaraq, oxşar bir sual window.onload üzərindən body.onload istifadəsi ilə əlaqədar codingforums-a geri body.onload . Nəticədə window.onload istifadə etmək lazımdır ki, görünür, çünki sizin strukturunuzu hərəkətdən ayırmaq yaxşıdır.

519
26 февр. Cavab 26 fevralda Josh Mein tərəfindən verilir . 2009-02-26 00:46 '09 da 0:46 'da 2009-02-26 00:46

Ümumi fikir, sənəd pəncərəsinin təqdimatadocument.onload üçün DOM Tree (sənədin içərisində markalanma kodundan tikildiyi) qurulduğunda başlandığında window.onload yanğınlarıdır .

İdeal olaraq, DOM ağacının hadisələrinə abunə olmağınız, demək olar ki, CPU yükü olmayan daşıyan Javascript istifadə edərək, gizli manipulyasiya aparmağa imkan verir. Əksinə, window.onload bir neçə xarici resursların istənilmədiyi, təhlil edildiyi və yüklənməsinə zaman sərf edə bilər.

► Script testi:

Fərqini və brauzerinizin yuxarıda göstərilən hadisə işləyicilərini necə tətbiq etdiyini görmək . , yalnız aşağıdakı sənədləri sənədinizə yapışdırın - <body> - tag.

 <script > 

►Result:

border=0

Burada xrom v20 (və, ehtimal ki, ən müasir brauzerlər) üçün müşahidə edilən nəticədir.

  • document.onload yoxdur.
  • <body> içində elan edildikdə, bir dəfə, <head> içində elan edildikdə onload iki dəfə onload (hadisənin document.onload kimi fəaliyyət göstərdiyi yerdə).
  • sayıcı və dövlətin vəziyyətinə görə tədbirlər, hər iki hadisənin davranışını təqlid etməyə imkan verir.
  • Alternativ olaraq, HTML element <head> içərisində bir window.onload hadisə işleyicisini bəyan <head> .

► Layihə nümunəsi:

Yuxarıdakı kod bu layihənin index.html ( index.htmlkeyboarder.js ) alınır.


Pəncərə obyektinin hadisə işləyicilərinin siyahısı üçün, MDN sənədlərinə baxın.

233
10 сент. Cavab Lorenz Lo Sauer tərəfindən verilib. 2011-09-10 15:05 '11 at 15:05 2011-09-10 15:05

HTML təhlilinə görə - son ,

  • Brauzer HTML mənbəyini təhlil edir və təxirə salınmış skriptləri işləyir.

  • Bir DOMContentLoaded bütün HTML təhlil edildikdən və document sonra document göndərilir. window hadisə baloncuklar.

  • Brauzer yükləmə hadisəsini gecikdirən resursları (məsələn, şəkillər) yükləyir.

  • Hadisə Bir load window göndərilir.

Buna görə icra əmri olacaq

  • DOMContentLoaded window hadisə dinləyicilərini tutma mərhələsində
  • DOMContentLoaded hadisə dinləyicilərinə document
  • DOMContentLoaded mərhələdə window hadisələrini dinləyən dinləyicilər
  • hadisə dinləyicilərini onload ( onload işləyicisi daxil olmaqla)

Çağırış balonu load hadisəsini ( onload işləyicisi daxil olmaqla) document çağırmaq heç vaxt çağırılmamalıdır. Yalnız load zəng edə bilərsiniz, ancaq load dolayı, bir üslub kimi bir alt qaynaq, sənədin özü yüklənməsidir.

51
22 июля '16 в 5:49 2016-07-22 05:49 cavab 22 iyul 16: 43-da Oriol tərəfindən 5:49 2016-07-22 05:49 ilə verilir

Hadisəni dinləyici əlavə edin

 <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function(event) { // - Code to execute when all DOM content is loaded. // - including fonts, images, etc. }); </script> 


Update March 2017

1 Vanilla JavaScript

 window.addEventListener('load', function() { console.log('All assets are loaded') }) 


2 jQuery

 $(window).on('load', function() { console.log('All assets are loaded') }) 


Uğurlar.
46
28 июня '16 в 14:57 2016-06-28 14:57 cavab 28 iyun 'da Akosh'a veriləcək ' 16' da 14:57 2016-06-28 14:57

Chrome'da, window.onload Firefox (versiya 35.0) və IE (versiya 11) də eyni olduqda, <body onload=""> fərqlənir.

Bunu aşağıdakı snippet ilə öyrənə bilərsiniz:

 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--import css here--> <!--import js scripts here--> <script > 

Və Chrome konsolunda "yüklənmiş pencereyi" (ilk növbədə) və "bodyload" i görəcəksiniz. Lakin, yalnız Firefox və IE-də cücə yükünü görəcəksiniz. IE və FF konsollarında " window.onload.toString() " window.onload.toString() aşağıdakıları görürsünüz:

"onload (hadisə) {bodyOnloadHandler ()}"

bu da "window.onload = function (e) ..." tapşırığının üzərində yazılmışdır.

10
26 янв. cavab VincentZHANG tərəfindən verilir 26 yanvar. 2015-01-26 07:08 '15 'da 7:08' de, 2015-01-26 07:08

window.onload lakin onlar tez-tez eyni. Eynilə, body.onload IE-də window.onload olur.

5
26 февр. Cavab AnthonyWJones verildi 26 fevral. 2009-02-26 00:47 '09 da 0:47 'da 2009-02-26 00:47

window.onloadonunload document.body.onloaddocument.body.onunload qısa onunload

Bütün html etiketi üçün document.onloadonload işleyicisi qorunur kimi görünür, lakin heç vaxt işləməyəcək.

Sənəddə ' onload ' → doğru

3
12 июня '14 в 3:21 2014-06-12 03:21 cavab user2190787 12 iyun '14, 3:21 2014-06-12 03:21 tərəfindən verilir

Window.onload standartdır, lakin PS3-də (Netfront əsasında) veb brauzer pəncərə obyektini dəstəkləmir, ona görə də orada istifadə edə bilməzsiniz.

1
19 мая '10 в 14:31 2010-05-19 14:31 19 may, saat 10: 00-da, gotofritz cavab verib 2010-05-19 14:31

Ayrıca cross-browser'da etibarlı, sübut edilmiş bir hadisə modelini təmin edən jQuery'i də kontrol edə bilərsiniz.

0
15 мая '12 в 4:12 2012-05-15 04:12 15 may, 2012-ci il saat 4:12 mtoy cavab verilir 2012-05-15 04:12

yazıları ilə bağlı digər suallar və ya sual verin