healer
Администратор
Из: Москва
Сообщения: 24467
|
 |
Загрузка DOM и определение момента запуска JS |
|
Послано: 20-07-2015 13:33 |
|
|
Если JS работает с элементами DOM, то необходимо, чтобы он начал
выполняться после загрузки всей DOM или требуемых элементов DOM.
Этого можно добиться разными путями.
Рассмотрим некоторые из них, их достоинства и недостатки.
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24467
|
 |
Загрузка DOM и определение момента запуска JS |
|
Послано: 20-07-2015 13:34 |
|
|
Событие DOMContentLoaded
DOMContentLoaded браузер полностью загрузил HTML, и построил DOM-дерево.
Основной недостаток - событие DOMContentLoaded поддерживается во всех браузерах, кроме IE8-.
Существуют различного рода костыли, которые позволяют
в той или иной мере моделировать это событие и на более старых IE.
Следует так же учитывать, что если в документе есть теги <sсript>,
то браузер обязан их выполнить до того, как построит DOM.
Поэтому событие DOMContentLoaded ждёт загрузки и выполнения таких скриптов.
И еще один момент. Если в документе раньше, чем тег <sсript> есть ссылка на внешнюю таблицу стилей,
то сам скрипт запустится только после загрузки этой таблицы стилей, что в свою очередь,
отодвинет наступление события DOMContentLoaded.
Обработчик события подключается следующим образом
document.addEventListener("DOMContentLoaded", ready);
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24467
|
|
Загрузка DOM и определение момента запуска JS |
|
Послано: 20-07-2015 13:38 |
|
|
window.onload
Обработчик window.onload срабатывает, когда загружается вся страница, включая ресурсы стили, картинки, ифреймы и т.п.
Собственно это и является основным минусом - ресурсы могут грузиться долго.
Несомненный плюс - кросcбраузерность.
<sсript>
window.onload = function() {
alert( "Документ полностью загружен" );
};
</sсript>
или использовать onload в тэге body
Используется не часто в силу описанного выше недостатка.
Однако событие onload используется при загрузке скриптов, картинок.
var scrpt = document.createElement("sсript");
scrpt.src = "outside.js";
scrpt.onload = function() {
alert( "Можно использовать функции из загруженного файла" ); //
}
document.body.appendChild(scrpt);
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24467
|
|
Загрузка DOM и определение момента запуска JS |
|
Послано: 20-07-2015 13:39 |
|
|
Если перед перед закрывающимся тэгом body разместить скрипт,
то он начнет выполнятся когда основная часть DOM уже загружена.
Работает во всех браузерах.
Тонкая душа программиста почему-то считает это ограничением свободы.
<body>
...
<sсript>
init();
</sсript>
</body>
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24467
|
|
Загрузка DOM и определение момента запуска JS |
|
Послано: 20-07-2015 13:50 |
|
|
фреймворк
Почти все они предоставляют такой функционал, включая jquery.
Если вам нужна только эта функция, стоит задуматься о целесообразности их такого использования.
Существует и альтернатива. Так называемая мини-библиотека jquery.documentReady.js.
В ней реализованна только эта функция и сама jquery при этом не грузиться.
На момент написания поста она была тут - https://js.cx/sсript/jquery.documentReady.js
Из примера видно подключение и обращение.
<sсript src="https://js.cx/sсript/jquery.documentReady.js"></sсript>
<sсript>
$(function() {
alert( "DOMContentLoaded" );
});
</sсript>
Сама библиотека не содержит и 150 строк.
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24467
|
|
Загрузка DOM и определение момента запуска JS |
|
Послано: 20-07-2015 13:52 |
|
|
Ну и, наконец, велосипеды.
Открою вам страшную тайну - еще и до фреймворков люди писала код.
И решали эту проблему.
Более того, и сейчас продолжают.
Надо заметить, что в некоторых случаях эти решения более удобные.
Я знакомился с реализаций этой задачи от нескольких сотен строк кода до нескольких десятков.
Некоторые из них используют недокументированные особенности (например, IE младших версий при попытке сделать прокрутку до полной загрузки DOM генерирует ошибку. Это и используется для определения момента загрузки DOM).
Здесь я приведу решение, которое когда-то я нашел на просторах инета и слегка модифицировал. К сожелению, адрес первоисточника у меня не сохранился.
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24467
|
|
Загрузка DOM и определение момента запуска JS |
|
Послано: 20-07-2015 13:53 |
|
|
function initOnLoad(sElementName) {
var oElement = (sElementName == "body") ? document[sElementName] :
document.getElementById(sElementName);
if(oElement != null && typeof(oElement) != "undefined") { initpan2(); }
else { setTimeout(function() { initOnLoad(sElementName); }, 20); }
}
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24467
|
|
Загрузка DOM и определение момента запуска JS |
|
Послано: 20-07-2015 14:07 |
|
|
Выше приведен код, который я часто использую на страницах этого проекта.
Пример вызова функции:
initOnLoad("my_id");
Как следует из исходного кода, когда будет загружен элемент DOM my_id,
произойдет вызов процедуры initpan2.
Следует отметить, что загрузка элемента DOM прозойдет в общем случае раньше, загрузки всего DOM (DOMContentLoaded).
Если требуется отслеживать несколько разных элементов и выполнять при этом разные функции, то приведенный код можно модифицировать для таких целей
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24467
|
|
Загрузка DOM и определение момента запуска JS |
|
Послано: 20-07-2015 14:08 |
|
|
function initOnLoad(sElementName,myFunc) {
var oElement = (sElementName == "body") ? document[sElementName] : document.getElementById(sElementName);
if (oElement != null && typeof(oElement) != "undefined") { myFunc(); }
else { setTimeout(function() { initOnLoad(sElementName, myFunc); }, 20); }
}
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24467
|
|
Загрузка DOM и определение момента запуска JS |
|
Послано: 20-07-2015 14:15 |
|
|
Примеры вызовов
initOnLoad("navigation",initmenu);
initOnLoad("mtb",startbuild);
Второй параметр - имя функции, которую необходимо выполнить при наступлении события - загрузке DOM элемента с именем, передаваемым первым параметром.
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24467
|
|
Загрузка DOM и определение момента запуска JS |
|
Послано: 21-07-2015 09:27 |
|
|
<html>
<head>
<script>
function on() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.text = "alert('hello world!')";
document.body.appendChild(script);
}
window.onload = on;
</script>
</head>
<body>
</body>
</html>
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24467
|
|
Загрузка DOM и определение момента запуска JS |
|
Послано: 22-07-2015 11:33 |
|
|
Переписал скрипт, который выложил тут тремя постами выше, добавил дополнительную проверку, которая, вероятно, никому не нужна
function initOnLoad(sElementName, callback) {
if (callback && typeof(callback) === "function") {
var oElement = (sElementName == "body") ? document[sElementName] : document.getElementById(sElementName);
if (oElement != null && typeof(oElement) != "undefined") { callback(); }
else { setTimeout(function() { initOnLoad(sElementName, callback); }, 80); }
}
}
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
