Плавная отложенная загрузка изображений

[radrigo 180]

 

Всем привет.

 

Может кто подскажет, как сделать плавную отложенную загрузку изображений?

Изменено 7 марта 2019 пользователем radrigo

[odys 384]

1 час назад, radrigo сказал:

Может кто подскажет, как сделать плавную отложенную загрузку изображений?

https://daneden.github.io/animate.css/

и пример:

 

[redissx 251]

Простой вариант

img[data-src] {opacity: 0; transition: opacity .3s;}
img.lazy-loaded {opacity: 1;}

 

[radrigo 180]

Подскажите, а возможно сделать как на auto.ru. Чтобы везде изначально загрузились изображения размытые, или плохого качества, чтобы изначально вся страница сформировалась с учётом пропорций изображений, как-будто изображение прогрузились? А по мере прокрутки прогружались бы нормально?

https://auto.ru/kaliningrad/cars/all/

[redissx 251]

19 минут назад, radrigo сказал:

Подскажите, а возможно сделать как на auto.ru. Чтобы везде изначально загрузились изображения размытые, или плохого качества, чтобы изначально вся страница сформировалась с учётом пропорций изображений, как-будто изображение прогрузились? А по мере прокрутки прогружались бы нормально?

https://auto.ru/kaliningrad/cars/all/

Для этого изначально в src должна стоять эта превьюшка плохого качества. Так на авто.ру это реализовано так: маленькая картинка превьюшки размера 24-16, растянута во весь блок и наложен фильтр blur.

[radrigo 180]

Подскажите, если я хочу сделать заглушку цветной и не скрывать её при помощи opacity. Как сделать плавный переход от заглушки к картинке?

[redissx 251]

12 часов назад, radrigo сказал:

Подскажите, если я хочу сделать заглушку цветной и не скрывать её при помощи opacity. Как сделать плавный переход от заглушки к картинке?

Можно поставить заглушку, как фон у блока, в котором изображение.

[radrigo 180]

Кстати, кто-то заметил, что валидатор ругается, когда включено отложенная загрузка изображений. Говорит что в img должен обязательно присутствовать src. Вообще стоит из-за этого беспокоить?

[celsoft 6 076]

8 минут назад, radrigo сказал:

Кстати, кто-то заметил, что валидатор ругается, когда включено отложенная загрузка изображений. Говорит что в img должен обязательно присутствовать src. Вообще стоит из-за этого беспокоить?

Конечно будет ругаться, это же логично, т.к. по требованиям HTML этот атрибут обязателен. Это вам уже нужно определиться  самим, что важнее, валидатор или скорость загрузки.

[redissx 251]

11 часов назад, radrigo сказал:

Кстати, кто-то заметил, что валидатор ругается, когда включено отложенная загрузка изображений. Говорит что в img должен обязательно присутствовать src. Вообще стоит из-за этого беспокоить?

Можно делать так

<img data-src="{image-1}" src="{theme}/dleimages/no_image.jpg" alt="">
			

 

[odys 384]

5 часов назад, redissx сказал:

Можно делать так

и отложенной загрузки не будет!

Браузер до загрузки скрипта загрузит картинку, и смысл в отложенной загрузке?

[redissx 251]

3 часа назад, odys сказал:

и отложенной загрузки не будет!

Браузер до загрузки скрипта загрузит картинку, и смысл в отложенной загрузке?

Будет. Просто до загрузки все картинки будут одинаковые (no_image.jpg или любая какую укажете), картинку можно сделать хоть 1-1 пиксель. По мере загрузки картинки будут подменяться, это ведь именно так и работает: в src подставляется из data-src. Итого изначально условно вместо 20 полновесных картинок грузится одна маленькая, по мере скролла подгружаются полновесные как и должны.

[Spyhog 65]

4 часа назад, redissx сказал:

Будет. Просто до загрузки все картинки будут одинаковые (no_image.jpg или любая какую укажете), картинку можно сделать хоть 1-1 пиксель. По мере загрузки картинки будут подменяться, это ведь именно так и работает: в src подставляется из data-src. Итого изначально условно вместо 20 полновесных картинок грузится одна маленькая, по мере скролла подгружаются полновесные как и должны.

Вот как бы такое сделать для всех картинок в новости автоматически? Можно добавить картинку 1x1 и будет сначала заглушка выводиться, а можно добавить картинку gif и будет выводиться лоадер.

[alukardua 27]

ппц, развили дискуссию, частично может быть тут отвечено https://dle-faq.ru/faq/jquery/20298-kak-zadat-plavnoe-poyavlenie-js.html

[proba 57]

13 часов назад, redissx сказал:

Будет. Просто до загрузки все картинки будут одинаковые (no_image.jpg или любая какую укажете), картинку можно сделать хоть 1-1 пиксель. По мере загрузки картинки будут подменяться, это ведь именно так и работает: в src подставляется из data-src. Итого изначально условно вместо 20 полновесных картинок грузится одна маленькая, по мере скролла подгружаются полновесные как и должны.

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

[redissx 251]

1 час назад, proba сказал:

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

Тут речь об опции в версии 13.2. Кому нужно включат, не нужно - отключат, решение за владельцем сайта. А вообще, все индексируют. Выкладывали где-то официальный ответ от Яндекса, что они понимают dsta-src, data-original. Гугл тоже не глупее, на западе lazyload много используют. Скрипты по умолчанию включены, выключили - значит осознанное решение юзера и его проблемы.

10 часов назад, Spyhog сказал:

Вот как бы такое сделать для всех картинок в новости автоматически? Можно добавить картинку 1x1 и будет сначала заглушка выводиться, а можно добавить картинку gif и будет выводиться лоадер.

Да, это сейчас же можно сделать для кратких самому, а в новостях нет. В новостях нужно обращаться к разработчикам ( @celsoft ), чтобы сделали из коробки, если они увидят в этом положительное) Предвижу их возможное возражение, а какое отношение поисковиков к изначально куче одинаковых картинок в одной новости? По-моему мнению и наблюдению на больших сайтах из выдачи, нейтральное, поисковики все понимают что и для чего.

Изменено 10 марта 2019 пользователем redissx

[Gameer 310]

2 часа назад, proba сказал:

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

 

[Spyhog 65]

6 часов назад, redissx сказал:

А вообще, все индексируют. Выкладывали где-то официальный ответ от Яндекса, что они понимают dsta-src, data-original. Гугл тоже не глупее, на западе lazyload много используют. Скрипты по умолчанию включены, выключили - значит осознанное решение юзера и его проблемы.

Вот статья: https://yandex.ru/support/images/indexing.html