Как запустить скрипт после загрузки страницы js

4 способа запустить JavaScript при загрузки страницы

Рано или поздно при написании JavaScript’а возникает необходимость в том, чтобы он был автоматически запущен при загрузке страницы. Нужно это, как правило, для следующих действий: инициализация интерфейса (UI) и отложенная загрузка данных (lazy load). Как часто бывает, для такой простой на первый взгляд задачи, есть несколько способов решения.

Задача. После загрузки страницы, нам нужно каким-то образом проинициализировать меню функцией initiPageMenu(), которыя находится в файле menu.js.

1. Самый простой способ: в конце js-файла делаем вызов нужной функции.

Самый простой способ имеет множество недостатков:

• если скрипт подключается в теге , у него нет доступа к DOM-модели;
• вызов необходимой функции блокирует загрузку других скриптов;
• необходимо учитывать, что к моменту загрузки скрипта, DOM-модель существует и все необходимые зависимости учтены (например, загружен другой скриат).
• при просмотре файла menu.js не всегда очевидно, что будет выполнена функция initiPageMenu();
• данный способ ничего не знает о UpdatePanel.

1. На серверной стороне в событии OnLoad или OnPreInit добавить следующий код:

Этот способ значительно лучше. Вызов функции initiPageMenu() будет помещен в конец тега . Из недостатков отмечу следующее:

• при изменении имени функции необходимо перекомпилировать серверный код со всеми вытекающими отсюда последствиями;
• вызов клиентской (javascript) функции находится в серверном коде — ничего плохого в этом нет, но, imho, теряется красота кода на стороне сервере; хочу отметить, что во многих случаях этот вариант остаются единственным возможным (когда необходимо передать в клиентский код значение серверной переменной).

1. В файле menu.js добавить функцию page_load():

После загрузки страницы, ScriptManager ищет все обработчики page_load() и выполняет их в порядке загрузки. К моменту начала выполнения этой функции страница уже полностью загруженна браузером и есть доступ к DOM-модели.

• неширокая распространённость данного подхода (а недостаток ли это?);
• не работает без использования на странице ScriptManager (а такие страницы ещё остались!).

1. Последний способ, о котором я хочу рассказать — событие document.ready() при использовании jQuery:

Недостаки тут тоже есть (куда же без них?)

• необходимо использовать библиотеку jQuery;
• как и первый, данный способ также ничего не знает о UpdatePanel.

Какой способ использовать — каждый должен выбрать сам. Единственное, на что необходимо обратить внимание — использование нескольких способов одновременно сильно усложняет понимание и сопровождение кода. Исключением из этого правила является пункт 2, но и его можно обойти при использовании IScriptControl и клиентских событий AjaxScriptManager.

Запуск скрипта после загрузки страницы (DOM)

Для тех, кто не знает, почему не работают скрипты с обращением к элементам вида :

Скрипт пытается взаимодействовать с HTML-элементами на странице, которые находятся ниже по коду, чем сам скрипт. Соответственно, скрипт уже подгрузился, а элемент, с которым нужно будет взаимодействовать, еще нет. По этой причине ничего работать не будет.

Особенность языка Javascript в том, что его код выполняется последовательно, строка за строкой, как они написаны в исходном коде.

Варианты решения данного вопроса:

1. Один из простых способов ― перенести в body после всех элементов. При таком расположении сначала загрузится DOM, а потом скрипт. Пример:

 
.
   

window.onload = function() < // Ваш скрипт >; 

Так же можно добавить через window.addEventListener(‘load’, . ); или window.attachEvent(‘onload’, . );

Но у этого метода есть недостаток: если на странице сайта куча картинок, которые грузятся пол часа, то скрипт выполнится только после того, как загрузятся все картинки и это может занят много времени.

Ещё одним минусом является то, что нельзя указывать несколько функций таким образом. Т.е. если вы два раза использовали window.onload в коде, то вторая функция сотрёт первую. Но, чтобы это исправить, я сочинил интересный костыль:

 var windowOnloadAdd = function (event) < if ( window.onload )< window.onload = window.onload + event; >else < window.onload = event; >; >; windowOnloadAdd(function() < // Ваш скрипт >); 

1. Интересный вариант ― что-то между первым и вторым пунктом. Создать особую функцию и вызывать её через скрипт в конце body. Пример:В JS:

function onload() < // Ваш скрипт >; 

 .   

function myFunc() < // Ваш скрипт >; 

document.onreadystatechange = function() < if(document.readyState === 'complete')< // Ваш скрипт >> 

document.addEventListener('DOMContentLoaded', function() < // Ваш скрипт >, false); 

$$r(function() < // Ваш скрипт >); 

$(function() < // Ваш скрипт >); 

$(document).ready(function() < // Ваш скрипт >); 

YAHOO.util.Event.onDOMReady(function()< // Ваш скрипт >); 

 var readyList, DOMContentLoaded, class2type = <>; class2type["[object Boolean]"] = "boolean"; class2type["[object Number]"] = "number"; class2type["[object String]"] = "string"; class2type["[object Function]"] = "function"; class2type["[object Array]"] = "array"; class2type["[object Date]"] = "date"; class2type["[object RegExp]"] = "regexp"; class2type["[object Object]"] = "object"; var ReadyObj = < // Is the DOM ready to be used? Set to true once it occurs. isReady: false, // A counter to track how many items to wait for before // the ready event fires. See #6781 readyWait: 1, // Hold (or release) the ready event holdReady: function( hold ) < if ( hold ) < ReadyObj.readyWait++; >else < ReadyObj.ready( true ); >>, // Handle when the DOM is ready ready: function( wait ) < // Either a released hold or an DOMready/load event and not yet ready if ( (wait === true && !--ReadyObj.readyWait) || (wait !== true && !ReadyObj.isReady) ) < // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443). if ( !document.body ) < return setTimeout( ReadyObj.ready, 1 ); >// Remember that the DOM is ready ReadyObj.isReady = true; // If a normal DOM Ready event fired, decrement, and wait if need be if ( wait !== true && --ReadyObj.readyWait > 0 ) < return; >// If there are functions bound, to execute readyList.resolveWith( document, [ ReadyObj ] ); // Trigger any bound ready events //if ( ReadyObj.fn.trigger ) < // ReadyObj( document ).trigger( "ready" ).unbind( "ready" ); //>> >, bindReady: function() < if ( readyList ) < return; >readyList = ReadyObj._Deferred(); // Catch cases where $(document).ready() is called after the // browser event has already occurred. if ( document.readyState === "complete" ) < // Handle it asynchronously to allow scripts the opportunity to delay ready return setTimeout( ReadyObj.ready, 1 ); >// Mozilla, Opera and webkit nightlies currently support this event if ( document.addEventListener ) < // Use the handy event callback document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false ); // A fallback to window.onload, that will always work window.addEventListener( "load", ReadyObj.ready, false ); // If IE event model is used >else if ( document.attachEvent ) < // ensure firing before onload, // maybe late but safe also for iframes document.attachEvent( "onreadystatechange", DOMContentLoaded ); // A fallback to window.onload, that will always work window.attachEvent( "onload", ReadyObj.ready ); // If IE and not a frame // continually check to see if the document is ready var toplevel = false; try < toplevel = window.frameElement == null; >catch(e) <> if ( document.documentElement.doScroll && toplevel ) < doScrollCheck(); >> >, _Deferred: function() < var // callbacks list callbacks = [], // stored [ context , args ] fired, // to avoid firing when already doing so firing, // flag to know if the deferred has been cancelled cancelled, // the deferred itself deferred = < // done( f1, f2, . ) done: function() < if ( !cancelled ) < var args = arguments, i, length, elem, type, _fired; if ( fired ) < _fired = fired; fired = 0; >for ( i = 0, length = args.length; i < length; i++ ) < elem = args[ i ]; type = ReadyObj.type( elem ); if ( type === "array" ) < deferred.done.apply( deferred, elem ); >else if ( type === "function" ) < callbacks.push( elem ); >> if ( _fired ) < deferred.resolveWith( _fired[ 0 ], _fired[ 1 ] ); >> return this; >, // resolve with given context and args resolveWith: function( context, args ) < if ( !cancelled && !fired && !firing ) < // make sure args are available (#8421) args = args || []; firing = 1; try < while( callbacks[ 0 ] ) < callbacks.shift().apply( context, args );//shifts a callback, and applies it to document >> finally < fired = [ context, args ]; firing = 0; >> return this; >, // resolve with this as context and given arguments resolve: function() < deferred.resolveWith( this, arguments ); return this; >, // Has this deferred been resolved? isResolved: function() < return !!( firing || fired ); >, // Cancel cancel: function() < cancelled = 1; callbacks = []; return this; >>; return deferred; >, type: function( obj )

> // The DOM ready check for Internet Explorer function doScrollCheck() < if ( ReadyObj.isReady ) < return; >

 try < // If IE is used, use the trick by Diego Perini // http://javascript.nwbox.com/IEContentLoaded/ document.documentElement.doScroll("left"); >catch(e) < setTimeout( doScrollCheck, 1 ); return; >// and execute any waiting functions ReadyObj.ready(); 

 var type = ReadyObj.type( fn ); // Add the callback readyList.done( fn );//readyList is result of _Deferred() > return ready; >)(); 

 ready(function() < // Ваш скрипт >); 

1. И наконец самый странный и не всегда рабочий вариант ― использовать setTimeout. Пример: setTimout(function() < // Ваш скрипт >, 3000);

Это все варианты, которые я встречал, но возможно не единственный, так как другие программисты могли придумать свои функции для решения данной задачи.

Какой вариант использовать, решать вам 🙂

Выполнение (запуск) скрипта после загрузки страницы на jQuery/JavaScript

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

Исправить это можно, если отложить выполнение скрипта до полной загрузки страницы или DOM.

Запуск скрипта после загрузки DOM (Document Object Model) на jQuery/JavaScript

Для того чтобы браузер смог отобразить страницу вашего (и не только) сайта, ему необходимо построить DOM-дерево. Формируется оно за счет получения и разбора HTML-документа.

В тот момент, когда DOM готов (медиафайлы при этом могут быть еще не загружены) мы можем начать «играть» с нашими скриптами.

В jQuery состояние готовности DOM можно определить с помощью функции ready:

 $(document).ready(function() { // Ваш код >);

Сокращенная форма записи:

 $(function() { // Ваш код >);

Аналог функции $(document).ready на чистом JavaScript выглядит следующим образом:

 document.addEventListener("DOMContentLoaded", function() { // Ваш код >);

Как вы могли заметить, он основан на событии DOMContentLoaded.

Запуск скрипта после полной загрузки страницы на jQuery/JavaScript

Полная загрузка страницы подразумевает под собой и готовность DOM и полную загрузку всех медиафайлов, например таких, как изображения.

Отследить этот момент в jQuery можно с помощью обработчика события load:

 $(window).on("load", function() { // Ваш код >);

Аналогичный вариант на JavaScript:

 window.addEventListener("load", function() { // Ваш код >);

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

Как сделать вызов функции при загрузке страницы js?

Чтобы вызвать функцию при загрузке страницы, нужно объекту window добавить событие load . Событие сработает, когда браузер загрузит HTML-код, построит DOM-дерево и подгрузит все внешние ресурсы (картинки, стили и т.д.).

window.addEventListener('load', () =>  alert('Страница загружена!'); >);