延迟加载图像 - noscript 后备代码

Question

我正在使用 js 库 jquery lazyload2 在我的网站上加载图像，我使用以下代码显示图像：

<img class="lazyload img-fluid" src="{{$product->getEncodedThumb()}}"  data-src="{{asset($product->getMainImage())}}" alt="{{$product->name}}">

到目前为止一切正常，但我需要为未启用 javascript 的用户制作我的网站版本，我该如何处理？我可以用高质量图像替换延迟加载图像上的所有 src 标签，但它完全没有抓住重点，因为它总是在没有延迟加载的情况下下载高质量图像，我应该如何重新设计我的结构以允许 javascript 延迟加载和 noscript 标准加载？我需要为 noscript 用户创建完全不同的布局吗？

Answer 1

通常img标签后跟嵌入原始图像的noscript标签，即

/* hide lazyload images for disabled js */
.lazyload-hidden {
    display: none;
}

<img class="lazyload lazyload-hidden img-fluid"
     src="{{$product->getEncodedThumb()}}"
     data-src="{{asset($product->getMainImage())}}"
     alt="{{$product->name}}">
<noscript>
    <img class="img-fluid" src="{{asset($product->getMainImage())}}" alt="{{$product->name}}">
</noscript>

// show lazyload images
$('img[data-src]').removeClass('lazyload-hidden');

Answer 2

您可以在 HTML

中使用新的内置延迟加载

只需将 loading="lazy" 属性添加到您的像那样:

<img src="https://test.photos/300.jpg" loading="lazy" />

在这里你可以看到浏览器支持：

https://caniuse.com/#feat=loading-lazy-attr

延迟加载图像 - noscript 后备代码

lazyloading images - noscript fallback code

html

javascript

lazy-loading