Событие загрузки страницы javascript: Запуск кода JavaScript после загрузки страницы с использованием чистого JS и jQuery

alexxlab

jQuery — События

  1. Главная
  2. Туториалы
  3. Веб-программирование
  4. jQuery

События jQuery позволяют обрабатывать различные действия совершаемые над элементами страниц сайта. В библиотеке jQuery используются как стандартные события JavaScript, так и собственные.

Базовые события

Название Описание
.on() Универсальный метод установки обработчиков событий на элементы
off() Удаляет обработчики, установленные с помощь .on()
.one() Устанавливает обработчик события на выбранные элементы страницы, который сработает только по одному разу, на каждом из элементов
.unbind() Удаляет обработчик событий у выбранных элементов
.trigger() Выполняет указанное событие и запускает его обработчик
.triggerHandler() Запускает обработчик указанного события, без его выполнения
jQuery.proxy() По заданной функции, создает другую, внутри которой this будет равен заданному значению
event Объект с данными о текущем событии

События мыши

Название Описание
. click() Устанавливает обработчик «клика» мышью по элементу, либо, запускает это событие
.dblclick() Устанавливает обработчик двойного «клика» мышью по элементу, либо, запускает это событие
.hover() Устанавливает обработчик двух событий: появления/исчезновения курсора над элементом
.mousedown() Устанавливает обработчик нажатия кнопки мыши, либо, запускает это событие
.mouseup() Устанавливает обработчик поднятия кнопки мыши, либо, запускает это событие
.mouseenter() Устанавливает обработчик появления курсора в области элемента, либо, запускает это событие
.mouseleave() Устанавливает обработчик выхода курсора из области элемента, либо, запускает это событие
.mousemove() Устанавливает обработчик движения курсора в области элемента, либо, запускает это событие
. mouseout() Устанавливает обработчик выхода курсора из области элемента, либо, запускает это событие
.mouseover() Устанавливает обработчик появления курсора в области элемента, либо, запускает это событие
.toggle()		 Поочередно выполняет одну из двух или более заданных функций, в ответ на «клик» по элементу

События клавиатуры

Название Описание
.keydown() Устанавливает обработчик перехода клавиши клавиатуры в нажатое состояние, либо, запускает это событие
.keyup() Устанавливает обработчик возвращение клавиши клавиатуры в ненажатое состояние, либо, запускает это событие
.keypress() Устанавливает обработчик ввода символа с клавиатуры, либо, запускает это событие

События формы

Название Описание
.
focus()		 Устанавливает обработчик получения фокуса, либо, запускает это событие
.blur() Устанавливает обработчик потери фокуса, либо, запускает это событие
.focusin() Устанавливает обработчик получения фокуса самим элементом или одним из его дочерних
.focusout() Устанавливает обработчик потери фокуса самим элементом или одним из его дочерних
.select() Устанавливает обработчик выделения текста, либо, запускает это событие
.submit() Устанавливает обработчик отправки формы, либо, запускает это событие
.change() Устанавливает обработчик изменения элемента формы, либо, запускает это событие

События загрузки страницы

Название Описание
. ready() Устанавливает обработчик готовности дерева DOM
.load() Устанавливает обработчик завершения загрузки элемента
.unload() Устанавливает обработчик ухода со страницы

События браузера

Название Описание
.error() Устанавливает обработчик ошибки при загрузке элементов
.resize() Устанавливает обработчик изменения размеров окна браузера, либо, запускает это событие
.scroll() Устанавливает обработчик «прокрутки» элементов документа, либо, запускает это событие

 

Простой CSS-трюк для сокращения времени загрузки страницы

Оцените материал

  • 1
  • 2
  • 3
  • 4
  • 5

(17 голосов)

Все хотят, чтобы их страница загружалась быстрее. Это также полезно и в рамках поисковой оптимизации. Давайте посмотрим, как можно сократить время загрузки страницы, внеся несколько изменений в CSS.

Влияние CSS на время загрузки страницы

Загрузка CSS — один из основных факторов, влияющих на время загрузки страницы. Когда приложение встречает файл CSS, оно загружает его в приоритетном порядке. На основе CSS создаются объектные модели CSS (CSSOM). После создания CSSOM он объединяется с деревом DOM для создания «дерева рендеринга». Дерево рендеринга создается, когда дерево DOM объединяется с CSSOM и обеспечивает правильный стиль для всех компонентов на странице.

Чем больше CSS-кода в приложении, тем больше времени уходит на создание CSSOM и его слияние с DOM для создания дерева рендеринга. Как только HTML встречает файл CSS, он ожидает загрузки файла и создания CSSOM. Парсер ожидает завершения этой операции. Поэтому говорят, что CSS блокирует рендеринг.

Используем неблокирующий CSS

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

Мы хотим, чтобы браузер не ждал загрузки CSS и создания CSSOM во время начальной загрузки страницы. Мы можем отложить создание CSSOM для некритических файлов CSS. Представим, что у нас есть некоторый CSS, применяемый к определенному элементу, который будет отображаться только после начальной загрузки страницы. Таким образом, нам не нужно заставлять загрузку страницы ждать загрузку и анализ CSS.

HTML


	<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

В приведенном выше коде указано, что значением “media” для CSS является “print”, что означает, что CSS не будет применяться изначально и будет применен, когда пользователь попытается распечатать страницу. Наряду со ссылкой мы добавили функцию на событие “onload”, которая после загрузки страницы изменяет значение “media” на “all”, сделав его доступным для всех медиа-типов.

Это происходит, когда страница загружается, и, таким образом, страница не ждет загрузки упомянутого CSS и создания CSSOM.

Это ускоряет загрузку страницы.

* — Атрибут media=»print» следует применять только к тем элементам CSS, которые не влияют на первоначальную загрузку страницы. Стили, которые требуются при загрузке страницы, не могут иметь media=»print».

Оригинал статьи: Simple CSS Hack to Reduce Page Load Time

Автор статьи: Mayank Gupta

Перевод: Земсков Матвей

Другие материалы в этой категории: « SVG-спрайты и их использование

Наверх

Категории блога

  • Битрикс (40)
  • HTML-верстка (54)
  • Joomla (18)
  • JavaScript, jQuery (26)
  • PHP (10)
  • Базы данных (5)
  • Разное (23)

Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию:

  • Шаблон документа HTML5 (zip, 35. 41 Кб)
  • Шаблон jQuery-плагина (zip, 426 байт)
  • Шаблон сайта 1С-Битрикс (zip, 3.11 Кб)

Полезное