【问题标题】: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 方法,因为它会为设备调整图像大小,而不是延迟加载桌面大小的图像。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-06-17
  • 2016-01-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多