Я виконую зовнішній скрипт, використовуючи <script>внутрішній <head>.
Тепер, оскільки сценарій виконується до завантаження сторінки, я не можу отримати доступ до іншого <body>, крім усього іншого. Я хотів би виконати деякий JavaScript після завантаження документа (HTML повністю завантажений та вбудований в ОЗУ). Чи є якісь події, на які я можу підключитися, коли виконується мій сценарій, які запускаються при завантаженні сторінки?
Відповіді:
Ці рішення працюватимуть:
<body onload="script();">або
document.onload = function ...або навіть
window.onload = function ...Зауважте, що останній варіант - це кращий шлях, оскільки він ненав'язливий і вважається більш стандартним .
document.onload=не нав'язлива en.wikipedia.org/wiki/Unobtrusive_JavaScript
Обгрунтовано портативний, не рамковий спосіб, щоб ваш сценарій встановив функцію для запуску під час завантаження:
if(window.attachEvent) {
window.attachEvent('onload', yourFunctionName);
} else {
if(window.onload) {
var curronload = window.onload;
var newonload = function(evt) {
curronload(evt);
yourFunctionName(evt);
};
window.onload = newonload;
} else {
window.onload = yourFunctionName;
}
}Ця подія запускається, коли початковий документ HTML повністю завантажений та проаналізований , не чекаючи, коли таблиці стилів, зображення та підрамники закінчуються завантаженням. На цьому етапі ви можете програмно оптимізувати завантаження зображень та css на основі користувальницького пристрою або швидкості пропускної здатності.
Виконує після завантаження DOM (до img та css):
document.addEventListener("DOMContentLoaded", function(){
//....
});Примітка. Синхронний JavaScript призупиняє розбір DOM. Якщо ви хочете, щоб DOM пройшов якнайшвидший розбір після того, як користувач запитав сторінку, ви можете перетворити свій JavaScript асинхронним і оптимізувати завантаження таблиць стилів.
Зовсім інша подія, завантаження , повинна використовуватися лише для виявлення повністю завантаженої сторінки . Неймовірно популярна помилка використовувати навантаження, де DOMContentLoaded було б набагато доречніше, тому будьте обережні.
Виконання після завантаження та розбору всього:
window.addEventListener("load", function(){
// ....
});Ресурси MDN:
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/load
Список всіх подій в MDN:
window.onload = ...думати, що мій сценарій буде чекати, поки все не буде завантажено повністю до запуску, але, здається, window.onloadнасправді так поводиться document.addEventListener("DOMContentLoaded", ..., тоді як window.addEventListener("load", ...насправді чекає повного завантаження всього. Я б подумав, що window.onloadмає бути рівнозначним, window.addEventListener("load", ...а не document.addEventListener("DOMContentLoaded", ...?? Я отримав однаковий результат у Chrome та FF.
Можна помістити атрибут "onload" всередині тіла
...<body onload="myFunction()">...Або якщо ви використовуєте jQuery, ви можете це зробити
$(document).ready(function(){ /*code here*/ })
or
$(window).load(function(){ /*code here*/ })Я сподіваюся, що це відповість на ваше запитання.
Зауважте, що завантаження $ (window). Виконується після винесення документа на вашу сторінку.
Якщо сценарії завантажуються в <head>документі, то можна використовувати deferатрибут у тезі сценарію.
Приклад:
<script src="demo_defer.js" defer></script>З https://developer.mozilla.org :
відкладати
Цей атрибут Boolean встановлений для того, щоб вказувати браузеру, що сценарій повинен бути виконаний після розбору документа, але перед запуском DOMContentLoaded.
Цей атрибут не повинен використовуватися, якщо атрибут src відсутній (тобто для вбудованих сценаріїв), в цьому випадку це не матиме ефекту.
Для досягнення аналогічного ефекту для динамічно вставлених скриптів використовуйте натомість async = false. Сценарії з атрибутом відстрочки виконуватимуться в тому порядку, в якому вони відображаються в документі.
Ось сценарій, заснований на відкладеному завантаженні js після завантаження сторінки,
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "deferredfunctions.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>Де я це розміщую?
Вставте код у свій HTML безпосередньо перед
</body>тегом (біля нижньої частини файлу HTML).
Що це робить?
Цей код говорить, чекайте завантаження всього документа, а потім завантажте зовнішній файл
deferredfunctions.js.
Ось приклад вищезазначеного коду - Відстрочка візуалізації JS
Я написав це на основі відхиленого завантаження концепції JavaScript у сторінках JavaScript, а також з цієї статті. Відкладіть завантаження JavaScript
Подивіться на підключення document.onloadабо в jQuery $(document).load(...).
Робоча скрипка про<body onload="myFunction()">
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function myFunction(){
alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>
</html><script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>http://www.feedthebot.com/pagespeed/defer-loading-javascript.html
Якщо ви використовуєте jQuery,
$(function() {...});
еквівалентно
$(document).ready(function () { })
або інша коротка рука:
$().ready(function () { })
Дивіться, на яку подію вмикається функція JQuery $ ()? та https://api.jquery.com/ready/
document.onreadystatechange = function(){
if(document.readyState === 'complete'){
/*code here*/
}
}дивіться тут: http://msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx
Іноді я виявляю на більш складних сторінках, що не всі елементи завантажені тимчасовим вікном. Якщо це так, додайте setTimeout перед тим, як ваша функція відкладати - це момент. Це не елегантно, але це простий хакер, який добре справляється.
window.onload = function(){ doSomethingCool(); };стає ...
window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };Просто визначте, <body onload="aFunction()">що буде викликано після завантаження сторінки. Ваш код у скрипті додається, ніж додається aFunction() { }.
<body onload="myFunction()">Цей код добре працює.
Але window.onloadметод має різні залежності. Тож це може не працювати весь час.
Використання бібліотеки YUI (мені це подобається):
YAHOO.util.Event.onDOMReady(function(){
//your code
});Портативний і красивий! Однак, якщо ви не використовуєте YUI для інших матеріалів (див. Його документ), я б сказав, що використовувати його не варто.
Примітка: для використання цього коду вам потрібно імпортувати 2 сценарії
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js" ></script>Існує дуже хороша документація про те, як визначити, чи завантажувався документ за допомогою Javascript або Jquery.
За допомогою нативного Javascript цього можна досягти
if (document.readyState === "complete") {
init();
}Це також можна зробити всередині інтервалу
var interval = setInterval(function() {
if(document.readyState === 'complete') {
clearInterval(interval);
init();
}
}, 100);switch (document.readyState) {
case "loading":
// The document is still loading.
break;
case "interactive":
// The document has finished loading. We can now access the DOM elements.
var span = document.createElement("span");
span.textContent = "A <span> element.";
document.body.appendChild(span);
break;
case "complete":
// The page is fully loaded.
console.log("Page is loaded completely");
break;
}Використання Jquery Щоб перевірити, чи готовий DOM
// A $( document ).ready() block.
$( document ).ready(function() {
console.log( "ready!" );
});Щоб перевірити, чи всі ресурси завантажені, використовуйте window.load
$( window ).load(function() {
console.log( "window loaded" );
});Використовуйте цей код з бібліотекою jQuery, це буде прекрасно працювати.
$(window).bind("load", function() {
// your javascript event
});$(window).on("load", function(){ ... });.ready () працює найкраще для мене.
$(document).ready(function(){ ... });.load () буде працювати, але він не чекатиме, поки сторінка буде завантажена.
jQuery(window).load(function () { ... });Не працює для мене, розбиває сценарій наступного вбудованого встроєного. Я також використовую jQuery 3.2.1 разом з іншими вилами jQuery.
Щоб приховати мої веб-сайти, що завантажують накладку, я використовую таке:
<script>
$(window).on("load", function(){
$('.loading-page').delay(3000).fadeOut(250);
});
</script>document.addEventListener('readystatechange', event => {
// When HTML/DOM elements are ready:
if (event.target.readyState === "interactive") { //does same as: ..addEventListener("DOMContentLoaded"..
alert("hi 1");
}
// When window loaded ( external resources are loaded too- `css`,`src`, etc...)
if (event.target.readyState === "complete") {
alert("hi 2");
}
});$(document).ready(function() { //same as: $(function() {
alert("hi 1");
});
$(window).load(function() {
alert("hi 2");
});ПРИМІТКА: - Не використовуйте розмітку нижче (тому що вона замінює інші однотипні декларації):
document.onreadystatechange = ...Як каже Даніель, ви можете використовувати document.onload.
Різні рамки JavaScript hwoever (jQuery, Mootools тощо) використовують користувальницьку подію "domready", яка, напевно, повинна бути ефективнішою. Якщо ви розробляєте javascript, я настійно рекомендую використовувати рамки, вони значно підвищують вашу продуктивність.
<script type="text/javascript">
$(window).bind("load", function() {
// your javascript event here
});
</script>Моя порада використовувати asnycатрибут для тегу сценарію, який допоможе вам завантажити зовнішні скрипти після завантаження сторінки
<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>використовувати функцію завантаження самовиконання
window.onload = function (){
/* statements */
}(); onloadобробники, використовуючи цей підхід. Натомість слід додати слухача.