Javascript.RU

Выполнение javascript скрипта после загрузки страницы. Как проверить что сайт загрузился?

Написав вот такой код на сайте, мы неприменно заметим что он выдет ошибку...
Почему возникает ошибка, ведь код правильный?

<script type="text/javascript">
function olyx() {
	document.getElementById('baran').innerHTML='ну ты и баран';
}
olyx();
</script>

<div id="baran"></div>

Этот вопрос очень часто задают новички.
На самом деле ошибка возникает из за того что скрипт выполняется раньше чем создается элемент baran

Чтобы все заработало нужно поменять их местами

<div id="baran"></div>

<script type="text/javascript">
function olyx() {
	document.getElementById('baran').innerHTML='ну ты и баран';
}
olyx();
</script>

Но это допотопный способ не всегда удобен и практичен.

Некоторые умудряются переписать пример примерно вот так

<script type="text/javascript">
function olyx() {
	document.getElementById('baran').innerHTML='ну ты и баран';
}
window.onload = function () {
	olyx();
}
</script>

<div id="baran"></div>

Чтож в этом случае функция olyx() вызовется после загрузки документа.
Но представте что на странице сайта куча картинок, которые грузятся пол часа.
И что нам ждать пол часа пока загрузятся картинки чтобы вызвать функцию???
Да это маразм полнейший.
ведь на сайте вместо картинок могут быть счетчики посещений который дадут такой же эффект длительного простаивания.

К счастью выход есть.

Посмотрим как можно обойтись без маразмов, для этого перед тегом head подключим scriptjava фреймворк

<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>

Теперь перепишем первый пример но уже в нормальном исполнении

<script type="text/javascript">
function olyx() {
	$$('baran','ну ты и баран');
}

//выполнение кода только после загрузки документа
$$r(function() {
	//тут пишем все что хотим чтобы выполнилось после загрузки документа
	olyx();
}); 

</script>

<div id="baran"></div>

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

$$r(function() {
	//тут пишем все что хотим чтобы выполнилось после загрузки документа
	olyx();
});

Отличие этого кода от window.onload заключается в том, что мы не будем дожидаться загрузки картинок, а лиш дождемся полной загрузки документа - html кода и скриптов.

-7

Автор: Гость (не зарегистрирован), дата: 19 декабря, 2012 - 13:24
#permalink

Ох, заминусовал бы.
Лучше сказал бы как без всяких библиотек это делается.
А эта статья

полная чушь!

Автор: k1801 (не зарегистрирован), дата: 15 февраля, 2013 - 16:53
#permalink

Мне кажется, или...
Эта библиотека грузится дольше, чем самая большая страничка на моем сайте вместе со всеми картинками и прочим?)))


Автор: Гость (не зарегистрирован), дата: 28 мая, 2013 - 17:03
#permalink

Автор бредил ИМХО. Чего стоят только его примеры (баран, олух...).
Выполнить скрипт после загрузки DOM легко, если дописать в тег onLoad='load();'.


Автор: gordon freeman, дата: 18 июня, 2013 - 19:19
#permalink

onload - это для тех кто ничего не понимает

посмотрите исходники библиотек яндекса, вконтакте, jquery

там как у меня все написано и знаете почему так?

Код $$r не дожидается загрузки изображений и флеша

когда у вас на странице стоит чужой счетчик и код который сильно тормозит

window.onload сработает только когда этот код загрузится

счетчики иногда грузятся по 5 минут, пользователь не будет ждать ваш onload и не увидет эффектов на странице


Автор: shaltay, дата: 15 июля, 2013 - 08:52
#permalink

Из текста я понял, что все, кто не юзают библиотеку scriptjava - маразматики. weeeell


Автор: FANTOM22A, дата: 14 декабря, 2013 - 01:09
#permalink

а как же помещать джаваскрипт по правилам надо в хеад, а див в хеад не пропишешь раньше джаваскрипта


Автор: Гость (не зарегистрирован), дата: 7 января, 2014 - 00:57
#permalink

да уж...


Автор: CrazyMihey (не зарегистрирован), дата: 22 февраля, 2014 - 05:31
#permalink

Я сделал так:

<Head>
  <Script Defer Type="Text/JavaScript" Src="JS/ContentsBuilder.JS"></Script>
</Head>

(тут ключевое слово Defer)
Вроде, работает нормально (FF, WebKit, IE), то есть JavaScript, который ползает по DOM срабатывает сразу, а потом Картинки подтягиваются. Единственное, что Script валяется в отдельном Файле, где ему, кстати и место.
Если имеются возражения против такого метода — в Студию!


Автор: Гость (не зарегистрирован), дата: 30 сентября, 2016 - 12:08
#permalink

defer - отложенная загрузка. js не блокирует рендеринг html. И может загрузиться после нужного элемента, а может и раньше, если страница допустим большая а js маленький. Статья полная херня загрузить какой-то плагин чтобы загрузить свой скрипт


Автор: Таварищчъ (не зарегистрирован), дата: 19 августа, 2018 - 22:00
#permalink

Имхо defer Решает - Статья гавно и чушь, автор мудак, было, потс и гей.


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
1 + 0 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
gordon freeman
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние комментарии
Последние темы на форуме
Forum