2016-02-04 3 views
0

Прежде, чем вы начнете читать, не проголосуйте меня, это не просто еще один вопрос о window.onload vs document.onload.document.onload() странное поведение, несколько вопросов?

window.onload должен запускаться после полной загрузки всех узлов DOM. document.onload должен запускаться после того, как все узлы DOM готовы, и он не будет ждать полной загрузки всех активов.

Теперь, если у нас есть что-то подобное с window.onload:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Testing out document.onload and window.onload</title> 
     <script> 
      window.onload = function() { 
       alert('Loaded!'); 
      }; 
     </script> 
    </head> 
    <body> 
     <img src="https://goo.gl/0Oomrw" alt="Heavy image!" /> 
    </body> 
</html> 

Сценарий будет ждать, пока изображение не будет полностью загружен, а затем вызвать тревогу.

И если у нас есть что-то подобное с document.onload:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Testing out document.onload and window.onload</title> 
     <script> 
      document.onload = function() { 
       alert('Loaded!'); 
      }; 
     </script> 
    </head> 
    <body> 
     <img src="https://goo.gl/0Oomrw" alt="Heavy image!" /> 
    </body> 
</html> 

Ничего не произойдет, и сценарий не будет загружаться вообще, если мы не делаем нашу функцию самостоятельного выполнения, как это:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Testing out document.onload and window.onload</title> 
     <script> 
      document.onload = function() { 
       alert('Loaded!'); 
      }(); 
     </script> 
    </head> 
    <body> 
     <img src="https://goo.gl/0Oomrw" alt="Heavy image!" /> 
    </body> 
</html> 

И теперь скрипт будет работать, но не будет ждать, пока изображение полностью загрузится, как и с window.onload.

Теперь у меня есть 2 вопроса действительно:

  1. Почему нам нужно создать себя, выполняющие функцию с document.onload и window.onload работает без нашей функции самостоятельно выполняющейся? Он работает так же в новейших версиях Chrome и Firefox, поэтому я предполагаю, как он работает, но почему?

  2. Что действительно происходит с этим кодом после того, как мы назначили document.onload функцию? Я понимаю, что его способ ждать DOM для загрузки. Но мы говорим, что window.onload = function() { } Должно ли это сделать окно функцией? Или это окно имеет eventListener, прикрепленный к нему, что вызвано триггером загрузки? Похоже, я ответил на этот вопрос ... :) Это правда?

Спасибо!

+0

_ «А теперь скрипт будет работать» _ - но не так как вы ожидаете, что это - функция называется прямо там, а затем, когда эта часть кода выполняется - она ​​полностью отделена от любого события загрузки. – CBroe

+0

Итак, вы хотите сказать мне, что «document.onload = function() {...}();" начнет сам независимо от того, загружен ли DOM или нет? Зачем тогда document.onload? – JSmurf

+2

_ «Почему document.onload then?» _ - скажите нам, потому что, как уже объяснил Квентин, это из _your_ fantasy ... возможно, использовало 'document.foo = function (...' вместо этого для всего, что имеет значение. – CBroe

ответ

1

document.onload должен запускаться после того, как все узлы DOM готовы, и он не будет ждать полной загрузки всех активов.

Вы работаете под неправильным пониманием. Это не относится к делу.

Почему нам нужно создать самостоятельно выполняя функции с document.onload

Потому что нет такого понятия, как document.onload. Это произвольное имя свойства без особого значения.

Если вы назначили ему функцию, ничего не произойдет, кроме того, что его значение будет функцией.

Если вы сразу вызываете функцию и назначаете возвращаемое значение, тогда функция будет вызываться (сразу же, перед тем, как DOM будет готова), и ничего не произойдет со значением, которое вы храните в свойстве.


Если вы хотите запустить функцию, когда DOM готова затем использовать DOMContentLoaded event:

document.addEventListener("DOMContentLoaded", function(event) { 
    console.log("DOM fully loaded and parsed"); 
}); 
Смежные вопросы