尝试使用 shopify 在没有延迟加载或 jquery 的情况下延迟图像答案

【问题标题】：Trying to defer images without lazy load or jquery, using shopify尝试使用 shopify 在没有延迟加载或 jquery 的情况下延迟图像
【发布时间】：2019-01-03 21:04:21
【问题描述】：

我正在使用 Shopify，但我遇到了一些移动速度问题，在我的主页上，我的所有图像都会一次加载，所以我一直在阅读 Patrick Sexton 在 varvy.com 上的教程文章：延迟图像没有延迟加载或 jquery ( https://varvy.com/pagespeed/defer-images.html) 我不知道在哪里放置实际的 HTML 代码和 javascript 代码。我是否必须为每张图片输入一次代码，还是教程中提供的代码涵盖所有图片？
有人可以帮忙吗？

提供的代码在 Patrick 文章的底部。 https://varvy.com/pagespeed/defer-images.html

任何帮助将不胜感激:)

我还没有尝试将任何代码放在任何地方，因为我不想破坏某些东西。

【问题讨论】：

该页面上的代码将自行查找所有图像。

标签： jquery html image shopify deferred

【解决方案1】：

您可以使用srcset 加载特定分辨率的图像。这不会推迟它们，但会减少带宽使用。

<img srcset="elva-fairy-320w.jpg 320w,
elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

Shopify 支持此功能：https://www.shopify.ca/partners/blog/using-responsive-images

见：https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

【讨论】：

感谢您回复我，那么我应该将 Patrick 文章中给出的代码放在哪里？它应该进入主题。液体文件？ HTML和Java代码？还是放在单独的文件中？
另外，我应该说，因为我忘了提到这一点，这是我在移动速度上遇到的问题，桌面速度很好。
将脚本放在页眉模板中是安全的。您最好遵循 Shopify 方法，因为它会为设备调整图像大小，而不是延迟加载桌面大小的图像。