Перейти к публикации

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


Рекомендованные сообщения

 

Всем привет.

 

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

Изменено пользователем radrigo
Ссылка на сообщение
Поделиться на других сайтах
1 час назад, radrigo сказал:

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

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

и пример:

 

Ссылка на сообщение
Поделиться на других сайтах

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

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

Ссылка на сообщение
Поделиться на других сайтах
19 минут назад, radrigo сказал:

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

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

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

Ссылка на сообщение
Поделиться на других сайтах

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

Ссылка на сообщение
Поделиться на других сайтах
12 часов назад, radrigo сказал:

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

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

Ссылка на сообщение
Поделиться на других сайтах

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

Ссылка на сообщение
Поделиться на других сайтах
8 минут назад, radrigo сказал:

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

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

Ссылка на сообщение
Поделиться на других сайтах
11 часов назад, radrigo сказал:

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

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

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

 

Ссылка на сообщение
Поделиться на других сайтах
5 часов назад, redissx сказал:

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

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

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

Ссылка на сообщение
Поделиться на других сайтах
3 часа назад, odys сказал:

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

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

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

Ссылка на сообщение
Поделиться на других сайтах
4 часа назад, redissx сказал:

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

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

Ссылка на сообщение
Поделиться на других сайтах
13 часов назад, redissx сказал:

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

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

Ссылка на сообщение
Поделиться на других сайтах
1 час назад, proba сказал:

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

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

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

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

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

Изменено пользователем redissx
Ссылка на сообщение
Поделиться на других сайтах
2 часа назад, proba сказал:

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

 

Ссылка на сообщение
Поделиться на других сайтах
6 часов назад, redissx сказал:

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

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

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

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

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
×
  • Создать...