加载延迟的问题答案

【问题标题】：Problems with Loading lazy加载延迟的问题
【发布时间】：2021-04-23 21:25:55
【问题描述】：

当我通过 URL 或资产将延迟加载应用于静态图像时，我正在尝试对网站上的图像应用延迟加载，此属性完美运行

但是，当我从数据库中获取图像并将此属性应用于它时，由于某种原因，它不起作用

有效的静态图片示例

<img loading="lazy"  src="{{asset('img/minus.png')}}"/>

我的数据库中不起作用的动态图像示例

@foreach($product_all->product_images as $product_image_all)
    <img loading="lazy" id="image-{{$product_all->id}}" src="{{url('product/'.$product_image_all->image)}}">
@endforeach

我从数据库中获取图像的方法

public function getImage($filename) {
    $file = \Storage::disk('products')->get($filename);

    return new Response($file, 200);
}

错在哪里？为什么我不能让它工作？

【问题讨论】：

id="image-{{$product_all->id}}" 不会为每张图片生成相同的 id 吗？
不，因为每张图片只属于一个产品，我对其进行了限制，因此尽管每个产品存在更多图片，但它只显示一个。另外，如果我删除 id 它仍然无法正常工作...
这看起来像是一个错字，但每次迭代都应该是 id="image-{{$product_image_all->id}}" 以分配正确/唯一的元素 ID。

标签： javascript html laravel lazy-evaluation

【解决方案1】：

解决了。

问题是我还必须将 loading = "lazy" 添加到上面加载的图像中，因为有些图像是重复的

【讨论】：