嘗試使用 shopify 在沒有延遲加載或 jquery 的情況下延遲圖像

Question

我正在使用 Shopify 並且我有一些移動速度問題，在我的主頁上我的所有圖像都會一次加載，所以我一直在看 Patrick Sexton 在 varvy.com 上的教程文章：延遲圖像而不延遲加載或 jquery ( https:/ /varvy.com/pagespeed/defer-images.html ) 我被困在何處放置實際的 HTML 代碼和 javascript 代碼。 我是否必須為每個圖像輸入一次代碼，或者教程中提供的代碼是否涵蓋所有圖像？
請問有人可以幫忙嗎？

提供的代碼位於帕特里克文章的底部。 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