121

Я використовую наступний код для виконання деяких операцій після завантаження сторінки.

 <script type="text/javascript">
    window.onload = function () { 

        newInvite();
        document.ag.src="b.jpg";
    }
</script>

Але цей код працює неправильно. Функція викликається, навіть якщо деякі зображення або елементи завантажуються. Що я хочу, це називати функцію, сторінка завантажується повністю.

javascript html image

— Неєрай Кумар
джерело

1

Чи можете ви додати демонстрацію на JSFiddle.net ?

— Деякий хлопець

2

Чи можете ви використовувати jQuery? Якщо так, спробуйте$(window).load()

— Метт Хінцке

Так, ви могли б пояснити, що не працює належним чином? Ви отримуєте помилку чи, можливо, ви викликаєте alertфункцію, перш ніж вікно перемальовується (таким чином, воно виглядає так, що воно викликається перед завантаженням)? Код виглядає чудово, і змушення користувачів завантажувати великі бібліотеки, ймовірно, не усуне цю проблему або полегшить її діагностику.

— Jeffrey Sweeney

doxdesk.com/img/updates/20091116-so-large.gif

— Jeffrey Sweeney

Коли я кажу, що це не працює, я маю на увазі, ніж функція запускається, навіть якщо деякі зображення завантажуються.

— Неєрай Кумар

166

це може працювати для вас:

document.addEventListener('DOMContentLoaded', function() {
   // your code here
}, false);

або якщо вам подобається jquery,

$(document).ready(function(){
// your code
});

$(document).ready()запускається на DOMContentLoaded, але ця подія не запускається послідовно серед браузерів. Ось чому jQuery, швидше за все, реалізує важкі обхідні шляхи для підтримки всіх браузерів. І це зробить дуже важко "точно" моделювати поведінку за допомогою простого Javascript (але, звичайно, не неможливо).

як запропонували Джефрі Свіні та Дж. Торрес, я думаю, що краще мати setTimeoutфункцію, перш ніж запускати функцію, як показано нижче:

setTimeout(function(){
 //your code here
}, 3000);

— Шредхар
джерело

12

jQuery не readyбуде робити те, що вимагала ОП. readyпожежі, коли DOM завантажується, а не після завантаження елементів. loadзапуститься після завершення завантаження / надання.

— Хайме Торрес

Схоже, що ОП хоче, щоб усі елементи були завантажені повністю, а не лише HTML.

— Jeffrey Sweeney

3

@shreedhar або він міг би скористатися правильним інструментом для роботи ( load).

— Хайме Торрес

14

setTimeoutце погана ідея. Він покладається на завантаження сторінки протягом 3 секунд (або n секунд залежно від того, яке значення ви вибрали.) Якщо завантаження триватиме більше часу, воно не працюватиме, і якщо сторінка завантажується швидше, доведеться чекати без причини.

— JJJ

1

@ChristianMatthew його використанняCapture Якщо вірно, useCapture вказує на те, що користувач бажає ініціювати захоплення. Після ініціювання захоплення всі події вказаного типу будуть відправлені зареєстрованому слухачеві, перш ніж надсилатись до будь-яких подій EventTargets під ним у дереві DOM. Події, що киплять вгору через дерево, не викликають слухача, призначеного використовувати захоплення. Детальне пояснення див. У розділі Події DOM рівня 3 .

— Шредхар

52

JavaScript

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");
    }
});

те ж саме для jQuery:

$(document).ready(function() {   //same as: $(function() { 
     alert("hi 1");
});

$(window).load(function() {
     alert("hi 2");
});

ПРИМІТКА: - Не використовуйте розмітку нижче (тому що вона перезаписує інші однотипні декларації):

document.onreadystatechange = ...

— Т.Тодуа
джерело

1

чи підтримується цей крос-браузер

— bluejayke

Ця відповідь набагато краща за інші. +1

— Xydez

Дуже добре! Дякую.

— Farzin Kanzi

34

Якщо ви можете використовувати jQuery, подивіться навантаження . Потім ви можете встановити свою функцію після запуску вашого елемента після завантаження.

Наприклад, розгляньте сторінку з простим зображенням:

<img src="book.png" alt="Book" id="book" />

Обробник події може бути прив'язаний до зображення:

$('#book').load(function() {
  // Handler for .load() called.
});

Якщо для завантаження потрібні всі елементи в поточному вікні, ви можете використовувати

$(window).load(function () {
  // run code
});

— Хайме Торрес
джерело

1

Чи не loadметод jQuery просто прив'язує функцію до події завантаження за допомогою Javascript? Чим це може відрізнятися від того, що вже робить ОП?

— Олексій Каліцький

@AlexKalicki AFAIK не відрізнятиметься, за винятком того, що jQuery може використовуватись, addEventListenerа не прив'язувати onloadвластивість DOM0 .

— Альнітак

@AlexKalicki Я не можу сказати, що він використовує абсолютно таку ж функціональність, але згідно з документацією, jQuery гарантує, що всі елементи, включаючи зображення, завантажуються перед цим пожежею. Я схиляюсь до думки, що в цьому випадку буде додаткова логіка, і я не маю причин не вірити документації, хоча я ніколи не стикався з тим самим питанням, про яке повідомляє ОП.

— Хайме Торрес

4

Станом на JQuery v1.8, завантаження застаріло. джерело

— Адоніс К. Какулідіс

1

Найкраще вирішення питання.

— Роберто Сепулведа Браво

29

Я трохи не плутаю, що те, що ви маєте на увазі під час завантаження сторінки, "DOM Load" або "Content Load"? У html-сторінці завантаження може запустити подію після події двох типів.

Навантаження DOM: які забезпечують, що все завантажене дерево DOM починається до кінця. Але не слід завантажувати довідковий вміст. Припустимо, ви додали зображення imgтегами, тому ця подія гарантує, що всі imgзавантажені, але жодні зображення належним чином не завантажені чи ні. Щоб отримати цю подію, слід написати наступним чином:
```
document.addEventListener('DOMContentLoaded', function() {
   // your code here
}, false);
```
Або за допомогою jQuery:
```
$(document).ready(function(){
// your code
});
```
Після завантаження DOM та вмісту: які також вказують навантаження DOM та вмісту. Він забезпечить не тільки imgтег, він забезпечить також усі завантажені зображення та інший відносний вміст. Щоб отримати цю подію, слід написати наступним чином:
```
window.addEventListener('load', function() {...})
```
Або за допомогою jQuery:
```
$(window).on('load', function() {
 console.log('All assets are loaded')
})
```

— Ганіф
джерело

2

Це єдина відповідь, яка дає рішення, яке не стосується jQuery для ОП, з чітким поясненням

— Velojet,

@Hanif поводир DOMContentLoadedподій, схоже, нічого не робить для мене, але loadробить.

— Брендон Бенефілд

1

Чи не потрібні два останні приклади крапки з комою в кінці рядків?

— Р. Навега

11

Якщо ви хочете викликати функцію js на своїй html-сторінці, використовуйте подію onload. Подія завантаження відбувається, коли агент користувача закінчує завантаження вікна або всіх кадрів у FRAMESET. Цей атрибут може використовуватися з елементами BODY та FRAMESET.

<body onload="callFunction();">
....
</body>

— user2361682
джерело

7

Таким чином ви можете вирішити обидва випадки - якщо сторінка вже завантажена чи ні:

document.onreadystatechange = function(){
    if (document.readyState === "complete") {
       myFunction();
    }
    else {
       window.onload = function () {
          myFunction();
       };
    };
}

— цвіт_іко
джерело

3

Можна також спробувати нижче.

$(window).bind("load", function() { 
// code here });

Це працює у всіх випадках. Це запуститься лише тоді, коли буде завантажена вся сторінка.

— Ганеш Рам Раві
джерело

3

Ви найкраще ставите, наскільки я знаю, використовувати

window.addEventListener('load', function() {
    console.log('All assets loaded')
});

Відповідь №1 про використання DOMContentLoadedподії - це крок назад, оскільки DOM завантажиться до завантаження всіх активів.

Інші відповіді рекомендують, setTimeoutяким я настійно заперечую, оскільки це повністю суб'єктивно щодо продуктивності пристрою клієнта та швидкості мережевого з'єднання. Якщо хтось знаходиться в повільній мережі та / або має повільний процесор, завантаження сторінки може зайняти від кількох до десятків секунд, таким чином ви не зможете передбачити, скільки часу setTimeoutзнадобиться.

Що стосується readystatechange, він спрацьовує кожного разу, коли readyStateзміни, які, згідно з даними MDN , все ще будуть до loadподії.

Повна

Стан вказує на те, що подія навантаження збирається запустити.

— Райан Уокер
джерело

2

window.onload = () => {
  // run in onload
  setTimeout(() => {
    // onload finished.
    // and execute some code here like stat performance.
  }, 10)
}

— tvrcgo
джерело

2

Хоча цей фрагмент коду може бути вирішенням, зокрема пояснення дійсно допомагає покращити якість вашої публікації. Пам'ятайте, що ви відповідаєте на запитання читачів у майбутньому, і ці люди можуть не знати причини вашої пропозиції щодо коду.

— іві

@yivi, якщо це не автоматизоване повідомлення: для кожного досить очевидно, що означає цей код, тим більше, що в коді є коментарі ..

— bluejayke

1

Якщо ви не використовуєте жодних фреймворків JS, цей проект є найкращим способом підготувати додому стан, підтримуючи перехресну сумісність браузера

https://github.com/ded/domready/blob/master/ready.js

— Олів'є Рефало
джерело

1

Якщо ви вже використовуєте jQuery, ви можете спробувати це:

$(window).bind("load", function() {
   // code here
});

— сантош
джерело

4

Марно без пояснень.

— Даніель В.

1

Я можу вам сказати, що найкраща відповідь, яку я знайшов, - поставити сценарій "драйвер" відразу після </body>команди. Він є найпростішим і, мабуть, універсальнішим, ніж деякі рішення вище.

План: На моїй сторінці - таблиця. Я записую сторінку з таблицею у браузер, а потім сортую її за допомогою JS. Користувач може вдатися до нього, натиснувши заголовки стовпців.

Після того, як таблиця закінчується </tbody>командою, і тіло закінчується, я використовую наступний рядок, щоб викликати сортування JS для сортування таблиці за стовпцем 3. У мене вийшов сценарій сортування з Інтернету, щоб він не відтворювався тут. Принаймні наступного року ви можете побачити це в роботі, включаючи JS, на static29.ILikeTheInternet.com. Натисніть "тут" внизу сторінки. Це відобразить ще одну сторінку з таблицею та сценаріями. Ви можете бачити, як вони збирають дані, а потім швидко сортуйте їх. Мені потрібно трохи пришвидшити, але основи є зараз.

</tbody></body><script type='text/javascript'>sortNum(3);</script></html>

MakerMikey

— Мішель Морроу
джерело

0

Спробуйте цей jQuery :

$(function() {
 // Handler for .ready() called.
});

— djserva
джерело

1

jQuery не readyбуде робити те, що вимагала ОП. readyпожежі, коли DOM завантажується, а не після завантаження елементів. loadзапуститься після завершення завантаження / надання.

— Хайме Торрес

0

зателефонуйте до функції після завершення встановленого часу завантаження сторінки

setTimeout(function() {
   var val = $('.GridStyle tr:nth-child(2) td:nth-child(4)').text();
	for(var i, j = 0; i = ddl2.options[j]; j++) {
		if(i.text == val) {      
			ddl2.selectedIndex = i.index;
			break;
		}
	} 
}, 1000);

Розгорніть фрагмент

— MH
джерело

0

Я схильний використовувати наступний зразок, щоб перевірити наявність документа для завершення завантаження. Функція повертає Обіцянку (якщо вам потрібно підтримати IE, включіть polyfill ), що вирішується після завершення завантаження документа. Він використовується setIntervalпід ним, тому що аналогічна реалізація з setTimeoutможе призвести до дуже глибокого стеку.

function getDocReadyPromise()
{
  function promiseDocReady(resolve)
  {
    function checkDocReady()
    {
      if (document.readyState === "complete")
      {
        clearInterval(intervalDocReady);
        resolve();
      }
    }
    var intervalDocReady = setInterval(checkDocReady, 10);
  }
  return new Promise(promiseDocReady);
}

Звичайно, якщо вам не потрібно підтримувати IE:

const getDocReadyPromise = () =>
{
  const promiseDocReady = (resolve) =>
  {
    const checkDocReady = () =>
      ((document.readyState === "complete") && (clearInterval(intervalDocReady) || resolve()));
    let intervalDocReady = setInterval(checkDocReady, 10);
  }
  return new Promise(promiseDocReady);
}

За допомогою цієї функції ви можете зробити наступне:

getDocReadyPromise().then(whatIveBeenWaitingToDo);

— Пол Роу
джерело

-1

Я використовую веб-компоненти, щоб це працювало для мене:

document.addEventListener('WebComponentsReady', function() {
       document.querySelector('your-element').show();
});

— уфукомер
джерело

-3

Поставте свій сценарій після завершення тегу body ... він працює ...

— Калян
джерело

виконати функцію після повного завантаження сторінки

JavaScript

те ж саме для jQuery: