***************************
****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
答案 0 :(得分:1)
您真的需要显示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图像,使用那么多图像似乎是不现实的。调整逻辑以在需要时使用所需的内容。
答案 1 :(得分:0)
在一页中请求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来实现。