it-swarm.com.ru

выполнить функцию после полной загрузки страницы

Я использую следующий код для выполнения некоторых операторов после загрузки страницы.

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

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

Но этот код не работает должным образом. Функция вызывается, даже если загружаются некоторые изображения или элементы. Я хочу вызвать функцию, когда страница полностью загружена.

76
Neeraj Kumar

это может работать для вас:

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);
123
Shreedhar

Если вы можете использовать jQuery, посмотрите на load . После этого вы можете настроить запуск своей функции после завершения загрузки элемента.

Например, рассмотрим страницу с простым изображением:

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

Обработчик события может быть привязан к изображению:

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

Если вам нужны все элементы в текущем окне для загрузки, вы можете использовать 

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

А) с простой JavaScript :

document.addEventListener('readystatechange', event => {

    if (event.target.readyState === "interactive") {      //same as:  document.addEventListener("DOMContentLoaded"...   // same as  jQuery.ready
        alert("All HTML DOM elements are accessible");
    }

    if (event.target.readyState === "complete") {
        alert("Now external resources are loaded too, like css,src etc... ");
    }

});

Б) с JQuery :

$(function(){
    alert("hello");
});

C) Не используйте метод ниже (который использует знак =) :

document.onreadystatechange = function(){ alert("Hi"); }

потому что это перезаписывает другую однотипную декларацию.

19
T.Todua

Я немного сбит с толку, что вы подразумеваете под загрузкой страницы, "DOM Load" или "Content Load"? В html-странице загрузки может срабатывать событие после двух типов события.

  1. Загрузка DOM: которая гарантирует, что все загруженное дерево DOM начинается и заканчивается. Но не стоит загружать справочный контент. Предположим, вы добавили изображения с помощью тегов img, поэтому это событие гарантирует, что все img загружены, но не загружены изображения должным образом или нет. Чтобы получить это событие, вы должны написать следующим образом:

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

    Или используя jQuery: 

    $(document).ready(function(){
    // your code
    });
    
  2. После DOM и загрузки контента: которые указывают также на загрузку DOM и контента. Это обеспечит не только тег img, но и все загруженные изображения или другой относительный контент. Чтобы получить это событие, вы должны написать следующим образом:

    window.addEventListener('load', function() {...})
    

    Или используя jQuery:

    $(window).on('load', function() {
     console.log('All assets are loaded')
    })
    
15
Hanif

Если вы хотите вызвать функцию js на своей html-странице, используйте событие onload. Событие onload происходит, когда пользовательский агент завершает загрузку окна или всех кадров в FRAMESET. Этот атрибут может использоваться с элементами BODY и FRAMESET.

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

Таким образом, вы можете обрабатывать оба случая - если страница уже загружена или нет:

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

Если вы уже используете jQuery, вы можете попробовать это: 

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

Я могу вам сказать, что лучший ответ, который я нашел, это поставить скрипт «driver» сразу после команды </body>. Это самый простой и, возможно, более универсальный, чем некоторые из решений, описанных выше.

План: На ​​моей странице есть таблица. Я записываю страницу с таблицей в браузер, затем сортирую ее с помощью JS. Пользователь может прибегнуть к нему, щелкнув заголовки столбцов.

После завершения таблицы командой </tbody> и завершения тела я использую следующую строку, чтобы вызвать JS для сортировки таблицы по столбцу 3. Я получил сценарий сортировки из Интернета, поэтому он здесь не воспроизводится. По крайней мере, в следующем году вы можете увидеть это в действии, включая JS, по адресу static29.ILikeTheInternet.com. Нажмите «здесь» внизу страницы. Это откроет еще одну страницу с таблицей и сценариями. Вы можете увидеть, как он складывает данные, а затем быстро сортирует их. Мне нужно немного ускорить его, но основы уже есть.

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

MakerMikey

1
Micheal Morrow

Если вы не используете JS-фреймворки, этот проект - лучший способ получить готовое состояние dom, с кросс-браузерной совместимостью.

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

1
Olivier Refalo

вызвать функцию по истечении установленного времени загрузки страницы

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

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

Попробуйте это jQuery :

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

В качестве альтернативы вы можете попробовать ниже.

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

Это работает во всех случаях. Это сработает только тогда, когда вся страница загружена.

0
Ganesh Ram Ravi