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

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

Запуск js скриптов после загрузки страницы, требуется большинству современных сайтов.
Особенность языка Javascript — его код выполняется последовательно. Функции могут работать не корректно, когда элемент html еще не загрузился, а js уже пытается взаимодействовать с ним, как итог — получаем ошибку «ReferenceError: $ is not defined» в консоле браузера и остановку дальнейшего выполнения функции.

Часто встречается ошибка, когда jquery подключен в подвале (по рекомендации Google), а функция jq в

Что бы этого избежать, загружаем исполняемый скрипт, после того как страница загрузилась, ниже примеры использования на jq и чистом js

  1. Самый простой способ, это перенести ваш скрипт в конец body — разместить после всех элементов. Таким образом прогрузится DOM, и далее js
...</footer>
	<script>
		// Ваш скрипт
	</script>
</body>
  1. Использовать JavaScript функцию «window.onload» (в любом месте на странице)
<script>
window.onload = function() {
   // Ваш скрипт
};
</script>
  1. С использованием jquery
  • Выполнение скрипта после загрузки DOM ( «объектная модель документа» построена, но внешние ресурсы еще подгружаются )
<script>
$(document).ready(function() {
	// Ваш скрипт
}); 
</script>
  • Выполнить js после полной загрузки (включая все объекты, фреймы, изображения и пр.)
 <script>
 	$( window ).load(function() {
 		// Ваш скрипт
 	})
 </script>

4. Еще один просто пример на jquery, следом за загрузкой DOM

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

5.Нестандартные варианты без использования jquery использования, но могут пригодится.

Записываем скрипт в функцию, в теле страницы или стороннем файле

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

А запускаем данную функцию в конце body, как в первом примере, что бы запустить используем следующую конструкцию

...</footer>
	<script>
	  onload();
	</script>
</body>

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

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