延迟加载图像-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 标签，该标签带有嵌入的原始图像，即

  / *隐藏已禁用js的延迟加载图像* /
.lazyload-hidden {
    显示：无；
}
 

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

 

  //显示延迟加载图像
$（'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