尝试使用 shopify 在没有延迟加载或 jquery 的情况下延迟图像
[英]Trying to defer images without lazy load or jquery, using shopify
问题描述
I'm using Shopify and I have some mobile speed issues, on my home page all my images load at once, so I have been going by Patrick Sexton's tutorial on varvy.com article: Defer images without lazy load or jquery ( https://varvy.com/pagespeed/defer-images.html ) I'm stuck on where to put the actual HTML code and the javascript code.
我正在使用 Shopify 并且我有一些移动速度问题，在我的主页上我的所有图像都会一次加载，所以我一直在看 Patrick Sexton 在 varvy.com 上的教程文章：延迟图像而不延迟加载或 jquery ( https:/ /varvy.com/pagespeed/defer-images.html ) 我被困在何处放置实际的 HTML 代码和 javascript 代码。 And do I have to put the code in once per image or does that code provided on the tutorial cover all images?我是否必须为每个图像输入一次代码，或者教程中提供的代码是否涵盖所有图像？
Can anyone help, please?请问有人可以帮忙吗？
The code provided is at the bottom of Patrick's article.提供的代码位于帕特里克文章的底部。 https://varvy.com/pagespeed/defer-images.html https://varvy.com/pagespeed/defer-images.html
Any help would be appreciated :)任何帮助，将不胜感激 ：）
I have yet to try to put any code anywhere because I don't want to break something.我还没有尝试将任何代码放在任何地方，因为我不想破坏某些东西。
1 个解决方案
解决方案1
0 2019-01-03 21:07:57
You can use srcset to load resolution-specific images.您可以使用srcset加载特定于分辨率的图像。 This won't defer them, but it will lighten the bandwidth use.这不会推迟它们，但会减轻带宽使用。
<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">
This is supported by Shopify: https://www.shopify.ca/partners/blog/using-responsive-images这由 Shopify 支持： https ://www.shopify.ca/partners/blog/using-responsive-images
See: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images请参阅： https : //developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.