Вы можете авторизоваться через ВКонтакте, Фейсбук и оставить комментарий


JavaScript onReady

Вступление

Стандартный обработчик событий JavaScript document.onLoad проигрывает в событии DOMContentLoaded. Событию DOMContentLoaded не нужно ждать полной загрузки страницы в отличие от onLoad.

Событие onLoad ждет когда загрузятся все изображения, все счетчики и прочая анимация, тогда как DOMContentLoaded ждет когда будет загружена верстка страницы.

bindReady, onReady

Создадим 2 функции bindReady(handler) и onReady(handler). Сразу оговорюсь, автора этих функции я не знаю, но в интернете эти эти функции пользуются большим спросом при разработке сайтов использующих JavaScript.

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
/**
 * Функция bindReady - добавляет новый handler в событие загрузки страницы
 *
 */

function bindReady(handler)
{
    var called=false;
    function ready()
    {
        if(called)
        {
            return;
        }
        
        called = true;
        handler();
    }
    
    if (document.addEventListener)
    {
        document.addEventListener("DOMContentLoaded"function()
        {
            ready();
        },false);
    }
    else if (document.attachEvent)
    {
        if (document.documentElement.doScroll && window==window.top)
        {
            function tryScroll()
            {
                if (called || !document.body) return;
                
                try
                {
                    document.documentElement.doScroll("left");
                    ready();
                }
                catch(e)
                {
                    setTimeout(tryScroll,0);
                }
            }
            
            tryScroll();
        }
        
        document.attachEvent("onreadystatechange",function()
        {
            if(document.readyState==="complete") ready();
        });
    }
    
    if (window.addEventListener) window.addEventListener('load',ready,false);
    else if (window.attachEvent) window.attachEvent('onload',ready);
}


readyList=[];

/**
 * Функция onReady - добавляет handler в
 *
 */

function onReady(handler)
{
    if(!readyList.length)
    {
        bindReady(function()
        {
            for(var i=0;i<readyList.length;i++)
            {
                readyList[i]();
            }
        })
    }
    
    readyList.push(handler)
}

Пример

Использовать функции достаточно просто: в любом месте страницы вызывается функция onReady(function(){/*Набор операций*/}). После того как верстка страницы будет полностью загружена (НЕ ИЗОБРАЖЕНИЯ, НЕ ФЛЭШ-РОЛИКИ, А ИМЕННО ВЕРСТКА), выполнятся вписанные операции в функцию onReady.

Смотрите онлайн пример на сайте.

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
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>JavaScript OnReady</title>
<script type="text/javascript" src="onReady.js"></script>
<script type="text/javascript">
function OR_Alert()
{
    document.getElementById('textLayer').innerHTML += 'Запустили функцию OR_Alert(). JavaScript - полезная штука!<br>';
}

function OR_helloWorld()
{
    document.getElementById('textLayer').innerHTML += 'Запустили функцию OR_helloWorld(). Привет мир!<br>';
    document.getElementById('textLayer').innerHTML += 'Вызывать функцию можно где угодно и когда угодно!<br>';
}

onReady(function(){OR_Alert()});
</script>

</head><body>

<h1>JavaScript onReady</h1>
<p>Открой исходный код страницы и станет все понятно.</p>
<p><a href="onReady.js">Исходный код JavaScript onReady</a></p>

<script type="application/javascript">
onReady(function(){OR_helloWorld()});
</script>

<div id="textLayer"></div>

</body></html>

Результат

JavaScript onReady

Открой исходный код страницы и станет все понятно.

Исходный код JavaScript onReady Запустили функцию OR_Alert(). JavaScript — полезная штука!
Запустили функцию OR_helloWorld(). Привет мир!
Вызывать функцию можно где угодно и когда угодно!

Опять же советую посмотреть онлайн пример на сайте.

Опубликовано: 10 мая 2011  ·  Автор: Артём Фёдоров  ·  2819 просмотров

Категория

ГлавнаяПрограммированиеJavaScriptСобытияJavaScript onReady

Чтобы оставить комментарий нужно авторизоваться на сайте
или войти через ВКонтакте или Фейсбук

Войти через ФейсбукВойти через Твиттер

Комментарии

События, JavaScript, Программирование

© 2010-2017 expange.ru
При полном или частичном копировании статей сайта, ссылка на источник обязательна.

Хотите узнать больше информации, пишите на: artem@expange.ru

Полезное онлайн  ·  Новости  ·  Изображения  ·  Статьи по датам

О проекте  ·  Правила пользования  ·  Представительства

Благодарности и пожелания