延迟加载图像加载太慢

2024-05-18 • 问答

*************************** ****TABLE OF SIN VALUES**** *************************** ANGLE(DEG) SIN(ANGLE) 0.0 0.0000 20.0 0.3419 40.0 0.6425 60.0 0.8658 80.0 0.9847 100.0 0.9850 120.0 0.8666 140.0 0.6437 160.0 0.3434 180.0 0.0016 200.0 -0.3404 220.0 -0.6413 240.0 -0.8650 260.0 -0.9844 280.0 -0.9852 300.0 -0.8673 320.0 -0.6450 340.0 -0.3448 文件夹包含大约 14000张images图像。

我想使用jpg加载它们，但是客户端（Chrome）上存在性能问题。

每个滚动首先显示空白矩形，然后加载图像，但是速度非常慢。

在loading = 'lazy'主页上，我正在流畅地滚动，即无需等待图像，而且正如我所见，向下滚动没有限制。

如何解决这个问题？

youtube

您真的需要显示14000张图像吗？用户实际上要滚动浏览14000张图像吗？他们还会滚动500吗？我不熟悉lazy属性，但是我认为浏览器必须完成的工作越多，这就是为什么您会遇到性能问题的原因。您最后一次访问的站点是<ul>连续14000个项是什么？即使是大的<table>元素也会被分页。

我想您可以一次渲染较少的图像（即使100个是很多，还是要延迟加载，取决于大小），一旦用户达到50个标记，就可以请求还有100个，等等。分页您的请求。

您可能要看的另一件事是常见的data-lazy=http://example.com/path/source.jpg。您可以阅读有关该here的更多信息。即使您不使用框架，也有很多其他关于如何基于窗口滚动事件加载图像的资源。

这是一个非常简单的答案：https://stackoverflow.com/a/5871121/3404054

我的2美分是您不需要一次14k图像，使用那么多图像似乎是不现实的。调整逻辑以在需要时使用所需的内容。

在一页中请求14000？我什至无法想象要在浏览器中加载1k图像，如果已经是14k，还可以加载多少图像。

根据您的代码：

foreach($arr as $el){
   $ht .= "<img class='bimg' src = '" . $el . "' width = 151.11' height = '86.73' alt = 'img' loading = 'lazy'>\n";
}

我有几点建议：

您正在将所有图像src='".$el."'加载到浏览器中。通常，惰性加载不会在src属性中获取图像。有时它会通过data属性存储位置，然后lazyload插件会动态获取它。
检查“网络”标签以检查页面的性能。
对于14k的图像，建议您分批获取数据。例如，从1000中加载100，以此类推。您可以通过ajax来实现。

延迟加载图像加载太慢

lmy87488860 回答：延迟加载图像加载太慢

大家都在问