图片加载优化,页面加载因为个别图片而停滞?

zitian
  • 73

因为图片页面加载过慢,如何优化。

多人担任管理员的后台系统中,有一个订单列表需要展示订单图片,用户点击后利用js插件将图片放大展示。但很多后台管理员反映,该页面有时需加载七分钟乃至于更久。其中在尝试懒加载时,发现个别图片需要加载一分钟乃至更久。

尝试

1、带宽
服务器带宽是独享5m的,按理来说,列表中的图片每张大致为200k,共20张,应该是足够的。而且大部分图片都能加载出来,每页都会有随机的一两张图片,出现需要花费很长时间才加载出来的情况。一刷新马上就加载好了。

2、懒加载
图片使用懒加载后(这里采用点击默认图再切换src加载图片的方式),页面加载速度是大幅度提升了,但在点击个别图片时,单张图片加载的时间也需要几分钟。


有没有比较好的方法能够解决这样的情况,或者能否跟我说说出现这种情况的主要原因?
麻烦各位大佬!!

回复
阅读 1.3k
4 个回答

大B小b的关系,带宽说的是小b,也叫bit大BByte
5m是5Mb -> 5*1024/8 = 640KB
图片200K是KB 200K20 = 4000KB = 4MB8 = 32Mb,也就是说服务器的带宽至少要32Mb以上才能保证图片能一次加载,这里还不算其他JS/CSS资源。

  1. 提升服务器带宽
  2. 设置图片加载超时,别老等着

我补充一点:

  1. 一刷新就好了,是因为大部分图片有了缓存,不占用带宽;
  2. 如果是http/1.1 服务器的话,同一个源,同时只能有 6个 tcp 链接,即使一下子加载 20张图片,浏览器其实也是先加载一部分,等一部分加载完了,再加载另一部分;
  3. 个别图片加载时间长,跟那个图片自身大小和存放位置是不是有关系?图片都放在同一个服务器么?是不是当时有其他请求再占用 tcp 链接?
宣传栏