Как сделать отложенную загрузку картинок?

Вопросы по вёрстке и JavaScript
Ответить
Nex-Otaku
Сообщения: 831
Зарегистрирован: 2016.07.09, 21:07

Как сделать отложенную загрузку картинок?

Сообщение Nex-Otaku »

Как сделать отложенную загрузку картинок? Кто какими методами пользуется? Есть ли рабочие расширения?

Как я понял, самый ходовый способ - это прописать кастомный атрибут для тега <img>, а потом с помощью яваскрипта задать "src" по значению этого атрибута.

Я нашёл три расширения, по этой теме, но ни одно не подошло.

1. https://github.com/toriphes/yii2-widget-lazyload
Здесь нужно прописать вызов виджета вместо каждого тега <img> во всех вьюшках. Это слишком захламляет код. И заодно создаёт кучу нюансов с другими расширениями - ведь некоторые сторонние виджеты генерируют HTML, придётся все править.

2. https://github.com/chrisb34/yii2-lazyload
Замена тегов автоматическая, но при подключении ругается на какие-то ошибки. Ну и ещё там лишнего кода много, который нельзя отключить.

3. https://github.com/xjflyttp/yii2-lazyload-widget
Здесь только подключаются ассеты. То есть опять не решена проблема автоматической замены атрибутов - нужно менять код во всех вьюшках.

Вы с такой задачей сталкивались? Как решили?
zelenin
Сообщения: 10596
Зарегистрирован: 2013.04.20, 11:30

Re: Как сделать отложенную загрузку картинок?

Сообщение zelenin »

вариант один и есть - src пустой, при появлении картинки на экране урл картинки копируется из атрибута в src.
Как решал? написанием 5 строчек на jquery. гугл: jquery image lazy load
Ответить