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”。 Product-template.liquid page 1 page 2 page3

任何人都可以帮助我了解这段代码的去向以及如何确定需要将代码延迟加载图像的位置吗？

Answer 1

我看到您正在使用<img src="..." />。为了使延迟加载正常工作，请将其更改为<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 }}

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

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

代替

<img src="image.jpg" />

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

2 个答案: