Некоторое время назад я начал писать большой высоконагруженный проект, в котором широко использовался JavaScript. За это время мне пришлось многое переосмыслить и столкнуться с необычными проблемами и различными хитростями для их решения.
Об одном из таких трюков и пойдет речь дальше.
Проблема:
Сайт состоит из одной страницы, на которой вся информация генерируется с помощью Ajax-запросов и большого количества скриптов.А с ростом функционала увеличивалось количество макетов и изображений, которые изначально включались в загружаемую страницу.
Если к этому добавить функцию прогнозирования действий пользователя и загрузки контента в фоновом режиме, то ситуация с начальной отрисовкой страницы и временем отклика интерфейса становится совсем печальной.
Решение:
Одной из мер по решению проблемы было написание модуля, который бы не только загружал картинки по мере необходимости, но и устанавливал плейсхолдеры, если по каким-то причинам загрузка не удалась.
Когда вам нужен скрипт:
- Ваш сайт сложный
- Загрузка информации с помощью ajax
- Множество макетов, которые могут быть не показаны пользователю.
Как это работает:
- У вас есть какая-то скрытая страница с картинками.
- Вместо этого загружается изображение размером 1 пиксель.
- Скрипт пробегает все картинки, разделяя их на группы.
- Если у вас есть свободное время без загруженности, вы можете использовать скрипт для загрузки картинок определенной группы (если предполагаете, что они могут понадобиться пользователю в ближайшее время).
- Если пользователь запрашивает вашу скрытую страницу, вы показываете изображения.
- Если вы указали неправильный адрес изображения, заполнитель просто останется размером в 1 пиксель, а изображение не изменится.
Преимущества:
Модуль написан на родном JavaScript. Для работы не требуются никакие библиотеки.Сжат с помощью Google Compressor до 1,5 КБ.
Поддерживает цепочку.
То есть методы можно вызывать так: lazyLoadingImages.show("1").
load("2").
load("3"); При желании вы можете передать ссылку на свой объект или переменную в модуль и не создавать еще одну глобальную переменную.
Использование:
Вставьте в заголовок страницы:Опишите изображения в документе следующим образом:<script defer src="js/lazyLoadingImages.min.js"></script>
<img src=".
/images/empty.png" url=".
/images/1200.jpg" type="group1" />
Где: src=".
/images/empty.png" — адрес изображения-заполнителя размером 1 пиксель url=".
/images/1200.jpg" - адрес исходного большого изображения
type="group1" - идентификатор группы, необязательный параметр 
Интерфейс
При событии DOMContentLoaded (окончание загрузки DOM) переданному в модуль глобальному объекту присваивается метод lazyLoadingImages (по умолчанию это window.lazyLoadingImages).ленивыйLoadingImages.update() — обновит список изображений и запомнит их URL для загрузки оригинальных изображений.
Этот метод вызывается автоматически при инициализации модуля.
Может быть полезно, если изменился DOM страницы.
lazyLoadingImages.load(тип) — загрузит картинки определенной группы (параметр type указывает какой именно).
Параметр типа является необязательным.
По умолчанию он загружает изображения, для которых не указан идентификатор группы.
lazyLoadingImages.show(тип) — показывать картинки конкретной группы (параметр type указывает какой именно).
Параметр типа является необязательным.
По умолчанию отображаются изображения, для которых не указан идентификатор группы.
УПД: Из-за того, что rghost недоступен ссылка на гитхаб MechanisM спасибо за замечание, я переименовал параметры.
Теперь URL-адрес данных и тип данных.
О заглушке изображения
При вставке картинок в документ (Например, отображение длинного списка игроков через внутренний HTML) можно добавить небольшую хитрость:- Все изображения вставляются со свойством Visibility = Hidden (или еще лучше Display: none)
- Мы прикрепляем событие onload ко всем изображениям
- Если происходит загрузка, удалите видимость; если нет, оставьте все как есть.
При необходимости в этой же функции можно вставить или убрать alt и заголовок изображения в моменты до и после загрузки.
CSS .
visibility {
visibility: hidden;
}
JavaScript utils.showAfterLoading: function(node) {
Теги: #JavaScript #высокая нагрузка #сложная верстка #разработка веб-сайтов #JavaScript
-
Еженедельный Геймдев: #62 — 20 Марта 2022 Г.
19 Oct, 24 -
Чем Кормить Ии (Конец)
19 Oct, 24
