Как запустить скрипт после загрузки страницы js
Перейти к содержимому

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

  • автор:

Запуск скрипта после загрузки страницы (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);

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

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

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.

Как сделать, чтобы скрипт выполнялся после загрузки страницы?

Совершенно нубский вопрос, так как не знаю JS совсем. Нашел подходящий скрипт, который добавляет блок raz5 после блока raz6 на странице по клику. Как переделать его, чтобы срабатывал не по клику, а просто после загрузки страницы автоматом?

 document.querySelector('#raz5 input').onclick = function() 
  • Вопрос задан более трёх лет назад
  • 16515 просмотров

Комментировать
Решения вопроса 1
Родился в 11110110111 году, 11000 января.

Если нет крайней необходимости ждать полной загрузки страницы: изображений, видео, etc (что бывает крайне редко), а достаточно дождаться, пока браузер загрузит DOM (проще говоря, структуру HTML), то используйте событие «DOMContentLoaded»:

document.addEventListener('DOMContentLoaded', function()< // весь ваш код тут >, false);

Второй вариант, который рекомендует тот же Google, это разместить все JS-скрипты в конце документа. Например, перед закрывающим тегом

3 способа запуска функции или кода Javascript (js) при загрузке страницы.

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

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

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

    #block   Документ без названия  К элементу с id #block не будет применяться правило css (background-color:yellow), т.к. строка
$("#block").css("background-color", "yellow");

Будет выполняться раньше, чем загрузиться html-строка:

 

Как быть, если нам нужно выполнить код или функцию, только после того, как весь документ полностью загрузится?

Я хочу рассказать о трех способах, как это можно сделать.

Все мои уроки по Javascript здесь.

1 способ. С использованием библиотеки jQuery.

Чаще всего сам им пользуюсь, наиболее простое и удобное решение, но требует подключения библиотеки Jquery.

Вот как преобразиться предыдущий, код, если мы воспользуемся следующим методом.

    #block   Документ без названия   

2 способ. С помощью элемента body и атрибута onload.

    #block    Документ без названия  Выбирайте тот способ, который более всего подходит к вашей ситуации, и применяйте его на практике.

Все мои уроки по Javascript здесь.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *