Матвей Земсков

Заметки веб-мастера

Немного о веб-технологиях

Мой блог содержит заметки о различных веб-технологиях, как клиентских, так и серверных. Здесь будут раскрыты вопросы html-верстки, программирования на javaScript и jQuery,разработки на PHP. Не останутся без внимания популярные системы управления сайтом «1С-Битрикс», Joomla и другие. О работе с ними, я также буду писать.

Мои заметки предназначены в основном для начинающих веб-мастеров. Несмотря на это, опытные разработчики также найдут здесь что-нибудь интересное для себя.

В своем блоге я собираюсь публиковать статьи о современных веб-технологиях (HTML5, CSS3 и других). Если в процессе работы над проектами я открываю для себя «свежее» решение какой-либо задачи, я записываю сюда информацию об этом, что позволяет мне при необходимости применять полученные знания в будущем.

Надеюсь информация будет полезна для посетителей.

 
Суббота, 16 мая 2020 22:57

Ленивая (lazy load) загрузка изображений с Progressively

Оцените материал
(0 голосов)

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

Скрипт Progressively является отличным инструментом для увеличения скорости страницы. Он является скриптом для отложенной загрузки изображений (lazy load), который загружает изображения постепенно в процессе прокручивания страницы пользователем.

Это бесплатный проект с открытым исходным кодом, поэтому вы можете скачать его и использовать на любом веб-сайте. Кроме того, он работает на 100% vanilla JS, поэтому у него нет зависимостей, которые могут утяжелить ваш сайт.

Progressively инструмент для ускорения загрузки сайта

Вы можете посмотреть примеры его использования на домашней странице Progressively.

Он немного отличается от других скриптов отложенной загрузки (lazy load), поскольку сохраняет фиксированные размеры изображений для всей страницы. Это предотвращает очень раздражающий скачок страницы, который вы видите, когда изображения быстро загружаются в область просмотра и увеличивают высоту содержимого. Изображения-placeholder’ы на самом деле выглядят как изображения, которые вы загружаете. Потрясающе!

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

Progressively имеет довольно обширный API, так что это отличный выбор для веб-разработчиков. Его внедрение на сайт не покажется вам сложным, если вы обладаете базовыми знаниями в разработке frontend.

Но вы можете узнать больше на главной странице инструмента на GitHub где размещена документация по API, представлены инструкции по внедрению, а также присутствую примеры кода, которые вы можете использовать в ваших проектах.

Progressively - скрипт для lazy load изображений

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

Загляните на страницу инструмента на GitHub, чтобы узнать больше и загрузить Progressively.

Демо

Оригинал статьи: Lazy-load Images Progressively with “Progressively”

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

Прочитано 863 раз
Другие материалы в этой категории:
Шпаргалка по переходу с jQuery на vanilla JavaScript

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


Свежие заметки
Последние комментарии
Наверх