javascript - 延迟加载图像 - 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

您可以在 HTML 中使用新的内置延迟加载

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

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

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

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