如何将延迟加载添加到我在 Shopify 上的产品页面？

Question

我想通过延迟加载图像来加快 Shopify 网站的加载时间。 问题是我无法在代码中找到特定的图像文件，无法将 class= "lazyload" 添加到其中。

这是我尝试过的：我已将这段代码粘贴到 product-template.liquid 页面的顶部：

<!--Lazy Loading -->
{{ "lazysizes.min.js" | asset_url | script_tag }}
<style>.lazyload,.lazyloading{opacity:0}.lazyloaded{opacity:1;transition:opacity.3s}</style>

然后将代码：class=“lazyload”添加到我认为看起来像图像但不起作用的任何代码块的末尾。 产品模板.liquid page 1 page 2 page3

谁能帮助我理解这段代码的去向以及如何确定我需要将代码放在哪里以延迟加载图像？

Answer 1

我看到您正在使用<img src="..." /> 。 为了让 lazyload 起作用，将其更改为<img data-src="..." />

更好的选择是实现本机延迟加载。 只需将loading="lazy"添加到您的图像中，瞧。

例如： <img src="https://dummyimage.com/600x400/000/fff" loading="lazy" />

更多详细信息以及与 lazyload 库的组合使用 - https://web.dev/native-lazy-loading/ & https://caniuse.com/loading-lazy-attr

Answer 2

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

{{ '//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js' | script_tag }}

将 class lazyload 添加到应该延迟加载的图像。 此外，将 src 属性更改为 data-src。

<img class="lazyload" data-src="image.jpg" />

代替

<img src="image.jpg" />