图片加载优化，页面加载因为个别图片而停滞？

Question

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

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

尝试

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

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

---

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

Answer 1

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

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

Answer 2

我补充一点：

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

Answer 3

max loading time

Answer 4

使用CDN加速呢