Блог

Я изучил сообщение Дина Эдварда onload и у меня вопрос: что не так с этим onload методом прикрепления? Где и почему это может привести к сбою? И когда безопасно использовать эту более простую функцию?

 function addLoadEvent(func){
    var oldonload = window.onload;
    if(typeof window.onload != 'function'){
        window.onload = func;
    }else{
        window.onload = function(){
            oldonload();
            func();
        }
    }
}
 

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

Обратите внимание, что статья Дина была написана в 2006 году. Современная практика заключается в том, чтобы просто поместить ваш скрипт непосредственно перед закрывающим </body> тегом. Пока ваш скрипт находится после любых элементов, на которые он ссылается, элементы будут доступны для вас. Таким образом, вы действительно подключаете вещи очень рано.

Пример (живая копия):

HTML:

 <p>This page has a big image on it, to help demonstrate
  <code>window.load</code>'s very late arrival.
  Note that this paragraph started out black, but was
  turned green <em>immediately</em> on page load.
  This demonstrates that the paragraph was available
  to the code at the end of the page.
</p>
<img src="http://apod.nasa.gov/apod/image/1110/sh2136s_block900.jpg" style="position: absolute; top: 20em;">
 

JavaScript (непосредственно перед </body> конечным тегом):

 (function() {
  var first;

  function hookLoad(handler) {
    if (window.addEventListener) {
      window.addEventListener("load", handler, false);
    }
    else if (window.attachEvent) {
      window.attachEvent("onload", handler);
    }
  }

  display("Script running at end of page; turning paragraph green.");
  document.getElementsByTagName('p')[0].style.color = "green";

  hookLoad(function() {
    display("First load handler");
  });

  hookLoad(function() {
    display("Second load handler");
  });

  function display(msg) {
    var p = document.createElement('p'),
        now = new Date().getTime();
    msg = now   ": "   msg;
    if (first) {
      msg  = " (delayed by "   (now - first)   "ms)";
    }
    else {
      first = now;
    }
    p.innerHTML = msg;
    document.body.appendChild(p);
  }
})();
 

Если вы по какой-то причине не можете этого сделать (поместить скрипт в конец body элемента), тогда такие приемы, как Dean’s, начинают быть полезными, но я бы настоятельно рекомендовал не использовать обработку «DOM loaded» самостоятельно; вместо этого используйте хорошую, хорошо поддерживаемую библиотеку, такую как jQuery, Prototype, YUI,или любой из нескольких других и используйте их «готовое» событие. Используя текущую работу, проделанную в этих библиотеках, вы можете вместо этого сосредоточиться на том, что вы пытаетесь сделать со своей собственной страницей / приложением.

Ссылки:

• Рекомендации YUI по ускорению работы вашего веб-сайта
• Google о том, когда доступны элементы DOM (и почему в их библиотеке нет события «DOM ready»)

[ window.load В частности: вам не нужно прибегать к вашему трюку, просто используйте addEventListener (если браузер поддерживает его, все делают, кроме более старых версий IE) или attachEvent (более старый IE). Смотрите hookLoad в примере выше. Они допускают несколько обработчиков для события.]