Question

我正在使用Shopify，但我遇到了一些移动速度问题，在我的主页上一次加载了所有图像，因此，我一直遵循varvy.com上的Patrick Sexton的教程文章：延迟图像而不延迟加载或jquery（ https://varvy.com/pagespeed/defer-images.html）我被困在放置实际HTML代码和javascript代码的位置。我是否必须将每个图像的代码放入一次，还是本教程中提供的代码覆盖了所有图像？
有人可以帮忙吗？

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

任何帮助将不胜感激：）

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

Answer 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

尝试使用shopify延迟没有延迟加载或jquery的图像

1 个答案: