我希望為網頁上的影像添加延遲加載，但是我遇到了一些問題。我一直在使用本指南：（https://speedboostr.com/shopify-lazy-loading/）。到目前為止，我已經正確完成了所有操作，并且除了以下代碼之外，一些影像一直在作業：
<div class="product-item {{ variant.id }}">
<div class="product-item__thumb">
{%- if product.images.size > 1 -%}
<a href="{{ product.url | within: collection }}">
<img class="thumb-primary popup_cart_image""lazyload" src="{{ product.featured_image.src | img_url: 'grande' }}" alt="{{ product.featured_image.alt }}">
{%- for image in product.images limit: 1 offset: 1 -%}
<img class="thumb-secondary popup_cart_image""lazyload" src="{{ image.src | img_url: 'grande' }}" alt="{{ product.featured_image.alt }}">
{%- endfor -%}
</a>
{%- else -%}
<a href="{{ product.url | within: collection }}">
<img class="popup_cart_image""lazyload" src="{{ product.featured_image.src | img_url: 'grande' }}" alt="{{ product.featured_image.alt }}">
</a>
{%- endif -%}
</div>
uj5u.com熱心網友回復：
我會通過Javascript來做到這一點。假設您有一個function接收 acontext和一個 URL 的 a，例如
function generatePicture(context, url) {
context.innerHTML = `<img src="${url}">`;
}
讓我們進一步假設您具有img-url="someurl"稍后可能需要延遲加載影像的位置的屬性。然后你可以在頁面加載時做這樣的事情：
for (let context of document.querySelectorAll("[img-url]")) generatePicture(context, context.getAttribute("img-url"));
但是，這在技術上還不是延遲加載。需要一些東西來觸發影像加載，但目前還不清楚應該觸發什么。上面我們假設頁面加載結束應該觸發所有影像的加載，但您可能需要更改此設定并應用您喜歡的觸發邏輯。
uj5u.com熱心網友回復：
您應該能夠將 loading="lazy" 屬性添加到影像
uj5u.com熱心網友回復：
您可以簡單地添加加載屬性。
<img
srcset="{{ image | img_url: '375x' }} 375w,
{{ image | img_url: '750x' }} 750w,
{{ image | img_url: '1100x' }} 1100w,
{{ image | img_url: '1500x' }} 1500w,
{{ image | img_url: '1780x' }} 1780w,
{{ image | img_url: '2000x' }} 2000w,
{{ image | img_url: '3000x' }} 3000w,
{{ image | img_url: '3840x' }} 3840w,
{{ image | img_url: 'master' }} {{ image.width }}w"
sizes="auto"
src="{{ image | img_url: '2000x' }}"
loading="lazy"
alt="{{ image.alt | escape }}"
>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/405426.html
標籤：
上一篇：BufferedImagegetTile()：它是什么，它與getSubimage()有何不同
下一篇：如何索引影像(PIL)型別的陣列