Отложенная Загрузка Изображений Lazy Load
#1
Отправлено 20 Октябрь 2019 - 17:05
Гугл советует сделать отложенную загрузку скрытых изображений. Делаю по инструкции: https://web.dev/code...lazyload-images
Загрузил скрипт lazysizes в редакторе шаблонов, подключил его до закрывающего тега body, присвоил class="lazyload" тегу img, изменил src= на data-src=. Нужного эффекта не наблюдаю. Картинки вообще не загружаются. Где камень преткновения?
#2
Отправлено 22 Октябрь 2019 - 10:32
#3
Отправлено 24 Октябрь 2019 - 18:56
#4
Отправлено 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
Отправлено 27 Октябрь 2019 - 16:07
#6
Отправлено 04 Ноябрь 2019 - 20:03
#10
Отправлено 08 Ноябрь 2019 - 14:28
#11
Отправлено 13 Ноябрь 2019 - 21:22
#12
Отправлено 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
Отправлено 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
Отправлено 21 Ноябрь 2019 - 03:17
В них тоже можно его указать, для этого в поле описания нажмите "Источник" и измените код изображений.
#15
Отправлено 21 Ноябрь 2019 - 08:57
<img alt="" class="lozad" data-="" src="https://"ссылка"/>
#16
Отправлено 22 Ноябрь 2019 - 07:47
Пришлите пожалуйста ссылку-пример на страницу с изображениями(можно без указания доменного имени).
#18
Отправлено 26 Ноябрь 2019 - 15:16
Понимаю, что с вопросами я не один на форуме , но уже пошел 2-й месяц обсуждения...
#19
Отправлено 29 Ноябрь 2019 - 22:34
Если кратко: вставляя код в "Источнике" надо сохранять его не отжимая кнопку "Источник", иначе код начинает жить своей жизнью и преобразовываться в черти что. Не знаю, может писали уже об этом сто раз, но лично столкнулся с этим впервые.
#20
Отправлено 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 анонимных