Отложенная загрузка изображений в пользовательском контенте

Question

Отложенная загрузка изображений в пользовательском контенте

23 августа 2021

1

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

Добрый день, как можно решить проблему? На страницах присутствует анимация, на которую жалуется PS. Как можно решить вопрос без удаления анимации? Может через ленивую загрузку? Если да, то как?

1 ответ

Николай

Решение

24 августа 2021 12:58

1

Спасибо! А это как решить? Просит задать значения для картинок в блоке фотоальбома

https://led-bags-shop.ru/

ответить

Сергеев Владимир

Разработчик

Решение

24 августа 2021 14:18

1

Если вы знаете ширину и высоту изображения, то укажите их в атрибутах width и height соответственно. Пиксели указывать не нужно.
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="ссылка на изображение" loading="lazy" class="lazyload js-only" width="ширина" height="высота" alt="описание изображения" /> <noscript> <img src="ссылка на изображение" width="ширина" height="высота" alt="описание изображения" /> </noscript>

ответить

Николай

Решение

24 августа 2021 14:22

1

Спасибо, но это уже в другом месте, для изображений в блоке фотоальбома (на главной который). Почему-то не могу вставить скриншот. Блок photos и в нем для каждого изображения просит w и h

ответить

Сергеев Владимир

Разработчик

Решение

24 августа 2021 14:42

1

В теме для приложения Магазин найдите файл home.photos.html
В этом файле тегу <img> добавьте атрибуты
width="300" height="300"

ответить

Николай

Решение

24 августа 2021 16:22

1

Почему-то не видно в меню этого файла

ответить

Сергеев Владимир

Разработчик

Решение

25 августа 2021 11:03

1

Я забыл его расшарить.
Можете открыть любой файл и потом адресной строке заменить имя файла на home.photos.html
При сохранении ругнётся, что нет прав. Надо нажать на сохранить второй раз.
Если не хотите с этим возиться, дождитесь обновления. Я уже добавил эти правки в файл.

ответить

Добавить ответ

Сергеев Владимир · Answer 1

Здравствуйте, Николай!

Вместо обычного тега изображения:

<img src="ссылка на изображение" alt="описание изображения" />

Используйте тег:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="ссылка на изображение" loading="lazy" class="lazyload" alt="описание изображения" />

Если заботитесь о тех, у кого выключена поддержка JS, то нужно ещё для них добавить изображение в теге <noscript>.
Всё вместе будет так:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="ссылка на изображение" loading="lazy" class="lazyload js-only" alt="описание изображения" />
<noscript>
    <img src="ссылка на изображение" alt="описание изображения" />
</noscript>

В редакторе всё это нужно делать в режиме HTML.