Как выполнить код перед window.load и после загрузки DOM? - программирование
Подтвердить что ты не робот

Как выполнить код перед window.load и после загрузки DOM?

Итак, вот что: У меня 2 страницы:
 - 1 x html страница
 - 1 x внешний javascript

Теперь на странице html будет внутреннее javascript-кодирование, позволяющее размещать "window.onload" и другие специальные методы/функции страницы.

Но во внешнем javascript я хочу, чтобы некоторые вещи выполнялись до того, как событие window.onload запускается. Это позволит сначала инициализировать персонализированные компоненты.

Есть ли способ обеспечить инициализацию во внешнем javascript перед запуском события window.onload?

Причина, по которой я попросил это, - попытаться сделать многоразовый код (построить один раз - использовать все), к которому внешний script должен проверить, что он находится в 'order/check' перед javascript в main html/jsp/asp/php страница берет верх. А также я не ищу решение в JQuery @_ @

Вот некоторые из ссылок на stackoverflow.com. Я просмотрел для решения:
- Javascript - Как определить, загружен ли документ (IE 7/Firefox 3)
- Как проверить, полностью ли загружена страница (скрипты и все)?
- Выполнение Javascript при полной загрузке страницы

Может ли кто-нибудь помочь или направить меня к решению, ваша помощь будет оценена в мужестве величия, пожалуйста - спасибо: D

С уважением, Крейг

<ч/" > [обновленный ответ - 19 ноября 2012]

Привет всем, спасибо за советы и предлагаемые решения, они все были полезны при поиске и тестировании для жизнеспособного решения. Хотя я чувствую, что не на 100% удовлетворены моими собственными результатами, я знаю, что ваши советы и помощь приблизили меня к решению и действительно могут помочь другим в подобной ситуации.

Вот что я придумал:

test_page.html

<html>
<head>
<title></title>
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript" src="test_script_1.js"></script>
<script type="text/javascript" src="test_script_2.js"></script>
<script type="text/javascript">
window.onload = function() {
    document.getElementById("div_1").innerHTML = "window.onload complete!";
}
</script>

<style type="text/css">
div {
    border:thin solid #000000;
    width:500px;
}
</head>
<body>
    <div id="div_1"></div>

    <br/><br/>

    <div id="div_2"></div>

    <br/><br/>

    <div id="div_3"></div>
</body>
</html>

loader.js

var Loader = {
    methods_arr : [],

    init_Loader : new function() {
        document.onreadystatechange = function(e) {
            if (document.readyState == "complete") {
                for (var i = 0; i < Loader.methods_arr.length; i++) {
                    Loader.method_arr[i]();
                }
            }
        }
    },

    load : function(method) {
        Loader.methods_arr.push(method);
    }
}

test_script_1.js

Loader.load(function(){initTestScript1();});

function initTestScript1() {
    document.getElementById("div_1").innerHTML = "Test Script 1 Initialized!";
}

test_script_2.js

Loader.load(function(){initTestScript2();});

function initTestScript2() {
    document.getElementById("div_2").innerHTML = "Test Script 2 Initialized!";
}

Это гарантирует, что скрипты будут вызываться перед вызовом обработчика события window.onload, но также гарантируют, что документ будет отображаться первым.

Что вы, ребята, думаете об этом возможном решении?

Благодарим вас за помощь и помощь: D

4b9b3361

ОТВЕТЫ

Ответ 1

В основном вы ищете это:

document.onreadystatechange = function(e)
{
    if (document.readyState === 'complete')
    {
        //dom is ready, window.onload fires later
    }
};
window.onload = function(e)
{
    //document.readyState will be complete, it one of the requirements for the window.onload event to be fired
    //do stuff for when everything is loaded
};

см. MDN для более подробной информации.

Имейте в виду, что DOM может быть загружен здесь, но это не означает, что внешний файл js был загружен, поэтому у вас может не быть доступа ко всем функциям/объектам, определенным в этом script, Если вы хотите проверить это, вам нужно будет использовать window.onload, чтобы гарантировать, что все внешние ресурсы также загружены.

Итак, в основном, в вашем внешнем script вам понадобятся 2 обработчика событий: один для readystatechange, который делает то, что вам нужно сделать на DOMready, и window.onload, по определению, запускаться после того, как документ будет готов. (это проверяет, полностью ли загружена страница).
Как вы знаете, в IE < 9 window.onload происходит утечка памяти (поскольку DOM и JScript-движок являются двумя отдельными объектами, объект window никогда полностью не разгружается, а слушатель не является GC'ed). Есть способ исправить это, который я разместил здесь, но это довольно многословно, но просто чтобы вы знали...

Ответ 2

Если вы хотите, чтобы что-то было сделано сразу, не дожидаясь какого-либо события, вы можете просто сделать это в JavaScript - вам не нужно ничего делать, чтобы ваш код запускался сразу, просто не делайте ничего, что заставит ваш код ждать. Так что это на самом деле проще, чем ждать событий.

Например, если у вас есть этот HTML-код:

<div id=one></div>
<script src="your-script.js"></script>
<div id=two></div>

то какой бы код не был в вашем script.js, будет запущен после div с id = one, но до того, как будет разобран div с id = two. Просто не регистрируйте обратные вызовы событий, но делайте то, что вам нужно прямо сейчас, в вашем JavaScript.

Ответ 3

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