Javascript lazyloading映像-noscript回退代码

我正在使用js库

jquery lazyload2

在我的网站上加载图像，为了显示图像，我使用以下代码：

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

getEncodedThumb（）}}”数据src=“{{asset（$product->getMainImage（））}”alt=“{{{$product->name}”>

---

到目前为止一切正常，但我需要为未启用javascript的用户制作我的网站版本，我该如何处理？我可以用高质量的图像替换懒散图像上的所有

src

标记，但它完全没有抓住要点，因为它总是在不懒散加载的情况下下载高质量图像，我应该如何重新设计我的结构以允许javascript lazyloading和noscript标准加载？我需要为noscript用户创建完全不同的布局吗？

通常

img

标记后面跟着带有嵌入原始图像的

noscript

标记，即

/*隐藏禁用js的懒散加载图像*/
懒洋洋{
显示：无；
}

getEncodedThumb（）}”
数据src=“{asset（$product->getMainImage（））}”
alt=“{{$product->name}}”>
getMainImage（））}}“alt=“{{{$product->name}}”>

//显示懒虫图片
$（'img[data src]'）。removeClass（'lazyload-hidden'）；

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

只需将loading=“lazy”属性添加到 就像这样：

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

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