Перейти к содержимому


Отложенная Загрузка Изображений Lazy Load


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 21

#1 Floyd

Floyd

    Пользователь

  • Пользователи
  • PipPip
  • 47 сообщений

Отправлено 20 Октябрь 2019 - 17:05

Помогите, пожалуйста!
Гугл советует сделать отложенную загрузку скрытых изображений. Делаю по инструкции: https://web.dev/code...lazyload-images
Загрузил скрипт lazysizes в редакторе шаблонов, подключил его до закрывающего тега body, присвоил class="lazyload" тегу img, изменил src= на data-src=. Нужного эффекта не наблюдаю. Картинки вообще не загружаются. Где камень преткновения?

#2 Floyd

Floyd

    Пользователь

  • Пользователи
  • PipPip
  • 47 сообщений

Отправлено 22 Октябрь 2019 - 10:32

Up :unsure:

#3 Floyd

Floyd

    Пользователь

  • Пользователи
  • PipPip
  • 47 сообщений

Отправлено 24 Октябрь 2019 - 18:56

Уп

#4 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 26 Октябрь 2019 - 08:54

Здравствуйте.

В раздел Сайт - Редактор шаблонов - forall.js - в самом конце вставьте:

/*! lozad.js
* v1.7.0 - 2018-11-08
* https://github.com/ApoorvSaxena/lozad.js
* Copyright (c) 2018 Apoorv Saxena; Licensed MIT */
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.lozad=e()}(this,function(){"use strict";var g=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(t[o]=r[o])}return t},r="undefined"!=typeof document&&document.documentMode,l={rootMargin:"0px",threshold:0,load:function(t){if("picture"===t.nodeName.toLowerCase()){var e=document.createElement("img");r&&t.getAttribute("data-iesrc")&&(e.src=t.getAttribute("data-iesrc")),t.getAttribute("data-alt")&&(e.alt=t.getAttribute("data-alt")),t.appendChild(e)}t.getAttribute("data-src")&&(t.src=t.getAttribute("data-src")),t.getAttribute("data-srcset")&&t.setAttribute("srcset",t.getAttribute("data-srcset")),t.getAttribute("data-background-image")&&(t.style.backgroundImage="url('"+t.getAttribute("data-background-image")+"')"),t.getAttribute("data-toggle-class")&&t.classList.toggle(t.getAttribute("data-toggle-class"))},loaded:function(){}};
function f(t){t.setAttribute("data-loaded",!0)}var b=function(t){return"true"===t.getAttribute("data-loaded")};return function(){var r,o,a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:".lozad",t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},e=g({},l,t),n=e.root,i=e.rootMargin,d=e.threshold,u=e.load,c=e.loaded,s=void 0;return window.IntersectionObserver&&(s=new IntersectionObserver((r=u,o=c,function(t,e){t.forEach(function(t){(0<t.intersectionRatio||t.isIntersecting)&&(e.unobserve(t.target),b(t.target)||(r(t.target),f(t.target),o(t.target)))})}),{root:n,rootMargin:i,threshold:d})),{observe:function(){for(var t=function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:document;return t instanceof Element?[t]:t instanceof NodeList?t:e.querySelectorAll(t)}(a,n),e=0;e<t.length;e++)b(t[e])||(s?s.observe(t[e]):(u(t[e]),f(t[e]),c(t[e])))},triggerLoad:function(t){b(t)||(u(t),f(t),c(t))},observer:s}}});
/* END lozad.js */



Далее зайдите в main.js в самом начале вставьте:

/*
* lazy loads elements with default selector as '.lozad'
*/
$(function(){
lozad().observe();
})
Далее, всем изображениям добавьте, пожалуйста, класс lozad, пример для шаблона Товары.

Было:
			 <img class="goods-cat-image-medium" src="{% IF nested_categories_list.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=azure{% ELSE %}{nested_categories_list.IMAGE_MEDIUM}{% ENDIF %}"> 

Стало:
			 <img class="goods-cat-image-medium lozad" data-src="{% IF nested_categories_list.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=azure{% ELSE %}{nested_categories_list.IMAGE_MEDIUM}{% ENDIF %}">

Сообщение отредактировал metry: 04 Июнь 2021 - 19:07


#5 Floyd

Floyd

    Пользователь

  • Пользователи
  • PipPip
  • 47 сообщений

Отправлено 27 Октябрь 2019 - 16:07

Сделал все по инструкции, появляется сообщение об ошибке JS - "На странице возникла JS ошибка"

#6 Floyd

Floyd

    Пользователь

  • Пользователи
  • PipPip
  • 47 сообщений

Отправлено 04 Ноябрь 2019 - 20:03

:mellow:

#7 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 05 Ноябрь 2019 - 15:35

Просмотр сообщенияFloyd (04 Ноябрь 2019 - 20:03) писал:

:mellow:

Здравствуйте. Если ошибка актуальна, то откройте, пожалуйста, сайт в браузере Хром, нажмите F12, появится окно. В этом окне перейдите на вкладку Console и пришлите нам скриншот ошибок оттуда

#8 Floyd

Floyd

    Пользователь

  • Пользователи
  • PipPip
  • 47 сообщений

Отправлено 05 Ноябрь 2019 - 22:12

Готово

Прикрепленные изображения

  • Снимок.JPG


#9 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 08 Ноябрь 2019 - 09:46

Просмотр сообщенияFloyd (05 Ноябрь 2019 - 22:12) писал:

Готово

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

#10 Floyd

Floyd

    Пользователь

  • Пользователи
  • PipPip
  • 47 сообщений

Отправлено 08 Ноябрь 2019 - 14:28

Сделал заново все по инструкции. Экспериментировал с шаблоном "Товары". На странице Товара исчезают картинки в сопутствующих товарах...

#11 Floyd

Floyd

    Пользователь

  • Пользователи
  • PipPip
  • 47 сообщений

Отправлено 13 Ноябрь 2019 - 21:22

Короче фигня какая-то. Решение не рабочее

#12 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 19 Ноябрь 2019 - 05:00

Здравствуйте.

В раздел Сайт - Редактор шаблонов - forall.js - в самом конце вставьте:
/*! lozad.js
* v1.7.0 - 2018-11-08
* https://github.com/ApoorvSaxena/lozad.js
* Copyright (c) 2018 Apoorv Saxena; Licensed MIT */
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.lozad=e()}(this,function(){"use strict";var g=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(t[o]=r[o])}return t},r="undefined"!=typeof document&&document.documentMode,l={rootMargin:"0px",threshold:0,load:function(t){if("picture"===t.nodeName.toLowerCase()){var e=document.createElement("img");r&&t.getAttribute("data-iesrc")&&(e.src=t.getAttribute("data-iesrc")),t.getAttribute("data-alt")&&(e.alt=t.getAttribute("data-alt")),t.appendChild(e)}t.getAttribute("data-src")&&(t.src=t.getAttribute("data-src")),t.getAttribute("data-srcset")&&t.setAttribute("srcset",t.getAttribute("data-srcset")),t.getAttribute("data-background-image")&&(t.style.backgroundImage="url('"+t.getAttribute("data-background-image")+"')"),t.getAttribute("data-toggle-class")&&t.classList.toggle(t.getAttribute("data-toggle-class"))},loaded:function(){}};
function f(t){t.setAttribute("data-loaded",!0)}var b=function(t){return"true"===t.getAttribute("data-loaded")};return function(){var r,o,a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:".lozad",t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},e=g({},l,t),n=e.root,i=e.rootMargin,d=e.threshold,u=e.load,c=e.loaded,s=void 0;return window.IntersectionObserver&&(s=new IntersectionObserver((r=u,o=c,function(t,e){t.forEach(function(t){(0<t.intersectionRatio||t.isIntersecting)&&(e.unobserve(t.target),b(t.target)||(r(t.target),f(t.target),o(t.target)))})}),{root:n,rootMargin:i,threshold:d})),{observe:function(){for(var t=function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:document;return t instanceof Element?[t]:t instanceof NodeList?t:e.querySelectorAll(t)}(a,n),e=0;e<t.length;e++)b(t[e])||(s?s.observe(t[e]):(u(t[e]),f(t[e]),c(t[e])))},triggerLoad:function(t){b(t)||(u(t),f(t),c(t))},observer:s}}});
/* END lozad.js */

Далее зайдите в main.js в самом начале вставьте:
/*
* lazy loads elements with default selector as '.lozad'
*/
$(function(){
lozad().observe();
})

Далее зайдите в раздел Сайт - Редактор шаблонов - Товары - найдите:
<img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=summer{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}" class="goods-image-small" alt="{goods.NAME}" title="{goods.NAME}" itemprop="image">

замените на:
<img class="goods-image-small lozad" data-src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=summer{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}" alt="{goods.NAME}" title="{goods.NAME}" itemprop="image">			

После изменений зайдите и проверьте фото товаров в категории, инструкцию проверила в Mozilla Firefox, ошибок и отсутствующих изображений не было.(для других изображений в код изображения добавлен класс lozad и вместо src указано data-src)

#13 Floyd

Floyd

    Пользователь

  • Пользователи
  • PipPip
  • 47 сообщений

Отправлено 20 Ноябрь 2019 - 17:48

Просмотр сообщенияVaccina (19 Ноябрь 2019 - 05:00) писал:

Здравствуйте.

В раздел Сайт - Редактор шаблонов - forall.js - в самом конце вставьте:
/*! lozad.js
* v1.7.0 - 2018-11-08
* https://github.com/ApoorvSaxena/lozad.js
* Copyright (c) 2018 Apoorv Saxena; Licensed MIT */
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.lozad=e()}(this,function(){"use strict";var g=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(t[o]=r[o])}return t},r="undefined"!=typeof document&&document.documentMode,l={rootMargin:"0px",threshold:0,load:function(t){if("picture"===t.nodeName.toLowerCase()){var e=document.createElement("img");r&&t.getAttribute("data-iesrc")&&(e.src=t.getAttribute("data-iesrc")),t.getAttribute("data-alt")&&(e.alt=t.getAttribute("data-alt")),t.appendChild(e)}t.getAttribute("data-src")&&(t.src=t.getAttribute("data-src")),t.getAttribute("data-srcset")&&t.setAttribute("srcset",t.getAttribute("data-srcset")),t.getAttribute("data-background-image")&&(t.style.backgroundImage="url('"+t.getAttribute("data-background-image")+"')"),t.getAttribute("data-toggle-class")&&t.classList.toggle(t.getAttribute("data-toggle-class"))},loaded:function(){}};
function f(t){t.setAttribute("data-loaded",!0)}var b=function(t){return"true"===t.getAttribute("data-loaded")};return function(){var r,o,a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:".lozad",t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},e=g({},l,t),n=e.root,i=e.rootMargin,d=e.threshold,u=e.load,c=e.loaded,s=void 0;return window.IntersectionObserver&&(s=new IntersectionObserver((r=u,o=c,function(t,e){t.forEach(function(t){(0<t.intersectionRatio||t.isIntersecting)&&(e.unobserve(t.target),b(t.target)||(r(t.target),f(t.target),o(t.target)))})}),{root:n,rootMargin:i,threshold:d})),{observe:function(){for(var t=function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:document;return t instanceof Element?[t]:t instanceof NodeList?t:e.querySelectorAll(t)}(a,n),e=0;e<t.length;e++)b(t[e])||(s?s.observe(t[e]):(u(t[e]),f(t[e]),c(t[e])))},triggerLoad:function(t){b(t)||(u(t),f(t),c(t))},observer:s}}});
/* END lozad.js */

Далее зайдите в main.js в самом начале вставьте:
/*
* lazy loads elements with default selector as '.lozad'
*/
$(function(){
lozad().observe();
})

Далее зайдите в раздел Сайт - Редактор шаблонов - Товары - найдите:
<img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=summer{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}" class="goods-image-small" alt="{goods.NAME}" title="{goods.NAME}" itemprop="image">

замените на:
<img class="goods-image-small lozad" data-src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=summer{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}" alt="{goods.NAME}" title="{goods.NAME}" itemprop="image">			

После изменений зайдите и проверьте фото товаров в категории, инструкцию проверила в Mozilla Firefox, ошибок и отсутствующих изображений не было.(для других изображений в код изображения добавлен класс lozad и вместо src указано data-src)

Спасибо! Теперь работает! Надеюсь, гугл оценит. Единственный вопрос еще остался: на созданных контент-страницах не получается data-src указать. Это исправимо?

#14 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 21 Ноябрь 2019 - 03:17

Здравствуйте.

В них тоже можно его указать, для этого в поле описания нажмите "Источник" и измените код изображений.

#15 Floyd

Floyd

    Пользователь

  • Пользователи
  • PipPip
  • 47 сообщений

Отправлено 21 Ноябрь 2019 - 08:57

Я через источник и делаю. Когда добавляю data-  к src и сохраняю, то в источнике код преобразуется в
<img alt="" class="lozad" data-="" src="https://"ссылка"/>

#16 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 22 Ноябрь 2019 - 07:47

Здравствуйте.

Пришлите пожалуйста ссылку-пример на страницу с изображениями(можно без указания доменного имени).

#17 Floyd

Floyd

    Пользователь

  • Пользователи
  • PipPip
  • 47 сообщений

Отправлено 22 Ноябрь 2019 - 12:47

Просмотр сообщенияVaccina (22 Ноябрь 2019 - 07:47) писал:

Здравствуйте.

Пришлите пожалуйста ссылку-пример на страницу с изображениями(можно без указания доменного имени).
Например, page/test

#18 Floyd

Floyd

    Пользователь

  • Пользователи
  • PipPip
  • 47 сообщений

Отправлено 26 Ноябрь 2019 - 15:16

Up

Понимаю, что с вопросами я не один на форуме , но уже пошел 2-й месяц обсуждения... :wacko:

#19 Floyd

Floyd

    Пользователь

  • Пользователи
  • PipPip
  • 47 сообщений

Отправлено 29 Ноябрь 2019 - 22:34

Короче, дошел до решения сам, методом тыка.
Если кратко: вставляя код в "Источнике" надо сохранять его не отжимая кнопку "Источник", иначе код начинает жить своей жизнью и преобразовываться в черти что. Не знаю, может писали уже об этом сто раз, но лично столкнулся с этим впервые.

#20 Santos

Santos

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 323 сообщений

Отправлено 14 Июль 2020 - 19:15

Нужна помощь!
lozad.js установил, на главной странице работает нормально.
В редакторе "Товары" в код изображения добавлен класс lozad, но при добавлении data-src и вместо src - пропадают товары в категориях, когда переключаешь раскладку с "таблица" на "список" и обратно тоже.
У меня в "Товарах" имеется 3 кода-строки с изображениями, посмотрите, может я что то не так прописал?
data-src  в 2 и 3 строке не прописываю, товары пропадают - клиенты не поймут.

1 строка <!-- Блок навигации по категориям, вложенным в текущую категорию -->

<img class="goods-cat-image-medium lozad" data-src="{% IF nested_categories_list.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-medium.png?design=kids{% ELSE %}{nested_categories_list.IMAGE_MEDIUM}{% ENDIF %}">

2 строка <!-- Вывод товаров ТАБЛИЦЕЙ -->

<img class="goods-image-small lozad" src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=kids{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}" alt="{goods.NAME}" title="{goods.NAME}" itemprop="image">

3 строка <!-- Вывод товаров Списком -->

<img class="goods-image-small lozad" src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=kids{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}" alt="{goods.NAME}" title="{goods.NAME}" itemprop="image">




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных