onDomReady без jQuery

Информация о материале
Категория: JavaScript
Просмотров: 10011

 

Выдернул из jQuery реализацию обработчика события onDomReady. Для тех, кто не в курсе поясню, что это событие возникает, после того как весь html код страницы будет загружен браузером, но в отличие от  window.load, срабатывает раньше того, как будут загружены все стили, скрипты, картинки и т.д. Т.е. если в своем JS вам надо провести какие-то манипуляции с DOM на странице до ее показа, то вам нужен именно этот метод. Вы, конечно, можете подключать jQuery целиком, и тогда в вашем распоряжении будет этот метод. К примеру при подключенном jQuery установить событие можно так

 

1
2
3
$(function(){
  alert('Привет Мир!!!')
}) 

или так 

1
2
3
$.ready(function(){
  alert('Привет Мир!!!')
}) 

Но бывают такие проекты, где хоть и очень легкая библиотека будет лишней, и приходится изобретать велосипед.

Я фанат jQuery и считаю что ее исходный код приближен к идеальному, и лично я лучше точно не напишу. Поэтому когда мне понадобился метод onDomReady я просто позаимствовал его из этой библиотеки.

Вот и сам код

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
(function(){
  var readyBound = false;
  var bindReady=function(){
    if ( readyBound ) return;
    readyBound = true;
    if ( document.addEventListener ) {
        document.addEventListener( "DOMContentLoaded", function(){
          document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
          ready();
        }, false );
    } else if ( document.attachEvent ) {
      document.attachEvent("onreadystatechange", function(){
        if ( document.readyState === "complete" ) {
          document.detachEvent( "onreadystatechange", arguments.callee );
          ready();
        }
      });
      if ( document.documentElement.doScroll && window == window.top ) (function(){
        if ( isReady ) return;
        try {
          document.documentElement.doScroll("left");
        } catch( error ) {
          setTimeout( arguments.callee, 0 );
          return;
        }
        ready();
      })();
    }
    if (window.addEventListener)
      window.addEventListener('load', ready, false);
    else if (window.attachEvent)
      window.attachEvent('onload', ready);
    else
      window.onload=ready;
  }
  var isReady=false
  var readyList= [];
  var ready=function() {
    if ( !isReady ) {
      isReady = true;
      if ( readyList ) {
        var fn_temp=null
        while(fn_temp=readyList.shift()){
          fn_temp.call( document);
        }
        readyList = null;
      }
    }
  }
  domReady=function(fn) {
    bindReady();
    if ( isReady )
      fn.call(document);
    else
     readyList.push( fn );
     return this;
  }
})();

Пользоваться этим очень просто

1
2
3
domReady(function(){
 alert('Привет любитель готовых велосипедов!!!');
});

Кто не верит что это чудо работает посмотрите пример работы onDomReady

Оставлять комментарии могут только зарегистрированные пользователи

Комментарии  

dimass
# dimass 01.01.2014 17:25
Так в чем тут прелесть?

alert("yo") срабатывает ПОСЛЕ заргузки и CSS и картинок и прочего добра...

Не проще ли ДЕЙСТВИТЕЛЬНО не изобретать велик и просто подвесить body событие onload?

Эффект тот же))))

А вообще, если немного пофилосовствовать на тему начальной загрузки странички, то могу сказать следующее:

1. Браузерам в 21 веке абсолютно начхать где он встретит "script type='text/javascript'", хоть после "" и 100500 пробелов, хоть до "" - он выполнит ваш скрипт. В этом четко просматривается американский подход к делу и можно уйти от четкого и структурированого кода. И в принципе это не плохо, это облегчает жизнь. Так что если у вас не очень мудренные, простенькие скрипты, управляющие элементами DOM - просто пишите их перед закрывающим body, т.е. в конце странички. А если скрипты не взаимодействуют с элементами - то можно и в шапке... для красоты)))))