#shopify #lazy-loading #shopify-template
#Shopify #отложенная загрузка #Shopify-шаблон
Вопрос:
Мне нужно загрузить все изображения Shopify через lazyload.
Комментарии:
1. вам нужно использовать любую 3-ю библиотеку JS для загрузки изображений по запросу, большинство стандартных и платных тем Shopify уже имеют одинаковые библиотеки JS.
Ответ №1:
Вам нужно добавить сценарий ленивой загрузки и класс для него.
Вот шаги, которые вы можете выполнить:
Шаг 1. Добавьте сценарий отложенной загрузки в магазин Shopify
От вашего администратора Shopify перейдите в Интернет-магазин> Темы.
Найдите тему, которую вы хотите отредактировать, а затем нажмите Действия> Редактировать код.
В каталоге макетов нажмите темы.жидкость, чтобы открыть ее в онлайн-редакторе кода.
В онлайн-редакторе кода добавьте приведенный ниже код перед закрытием тега.
{{ '//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js' | script_tag }}
Нажмите Сохранить.
Шаг 2: Укажите изображения для отложенной загрузки
Добавьте класс lazyload к изображениям, которые должны быть загружены лениво. Кроме того, измените атрибут src на data-src.
Перед
<img src="image.jpg" />
После
<img class="lazyload" src="img path" data-src="image.jpg" />
Шаг 3. Создайте экземпляр отложенной загрузки в вашем документе JS
Добавьте приведенный ниже код Javascript в свой файл .js или .js.liquid в каталоге Assets, и все готово.
$(document).ready(function(){
$("img.lazyload").lazyload();
});