CMS DataLife Engine - Система управления сайтами

Авторизация  
radrigo

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

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

 

Всем привет.

 

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

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

Поделиться сообщением


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

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

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

и пример:

 

  • Поддерживаю 1

Поделиться сообщением


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

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

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

 

  • Нравится 2
  • Поддерживаю 1

Поделиться сообщением


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

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

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

Поделиться сообщением


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

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

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

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

  • Нравится 1

Поделиться сообщением


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

Подскажите, если я хочу сделать заглушку цветной и не скрывать её при помощи 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 сказал:

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

 

  • Нравится 1

Поделиться сообщением


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

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

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

  • Нравится 1
  • Спасибо 1

Поделиться сообщением


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

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти
Авторизация