如何在 Shopify 上延迟加载图片？

我需要通过lazyload加载所有shopify图片。

我尝试了很多时间，但还没有成功。

谁能帮我解决这个问题。

您需要添加延迟加载脚本和相同的类。

以下是您可以遵循的步骤：

步骤 1：将延迟加载脚本添加到 Shopify 商店

从您的 Shopify 后台，转到在线商店 > 主题。

找到您要编辑的主题，然后点击操作 > 编辑代码。

在 Layouts 目录中，单击 themes.liquid 以在在线代码编辑器中将其打开。

在在线代码编辑器中，在关闭标记之前添加以下代码。

{{ '//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 代码添加到 Assets 目录中的 .js 或 .js.liquid 文件中，您就完成了。

$(document).ready(function(){

   $("img.lazyload").lazyload();

});