当前端加载的图片太多或者太快时应该怎么办？

当图片过大时的解决方案：

1、尽量压缩图片大小，最好将png格式转化为jpg格式（注意不要像我一样以为改了后缀就可以转换格式了），因为png格式是jpg格式的十几倍大小。

2、如果那张图片是作为背景图片存在的话，可以考虑用先将其设为none，然后加载完毕后（即onload事件触发）再让其显示。但是这样的话未免会让网页留白，图片的突然出现也会有些突兀，所以可以考虑使用一个跟北京图片一样的颜色作为html的背景色，这样图片会好点。比如饿了吗的处理个例：
　　背景：最近所做的项目中，类似于饿了么这样的平台，就是相对简单一些，并且，对于每一件商品，都有一个详情页，必须要进入这个详情页，才能加载一个很大的图片来展示图片详情。

　　问题：由于图片比较大， 所以下载的过程会比较慢，所以出现的情况就是，刚开始只显示一个背景层，紧接着图片开始一点一点的加载出来，而不是完全加载出来（恩，学过计算机网络的同学应该是知道原因的）， 这样的用户体验并不是很好。

　　改进方案： 首先，固定图片外层div的高度和宽度，然后img设置为100%（宽高都是如此），背景颜色要有，这样，即使没有显示出来，也是可以看得。重要，设置图片的 onload 事件，首先要设置图片为display: none； 然后当图片onload之后，我们再将之加载出来，并且加载时透明度可以是一个递增的过程。 代码大致如下（vue项目写的）：
getSomething (e) {
       var target = e.currentTarget;
       target.style.opacity = 0;
       target.style.display = ‘block’
       var timer = setInterval(function () {
         target.style.opacity = parseFloat(target.style.opacity) + 0.01;
         if (parseFloat(target.style.opacity) >= 0.98) {
           clearInterval(timer);
         }
       }, 30);
     }
<img src=“picture” alt=“”  style=“display: none;” v-on:load=“getSomething($event)” >

3、第三种方法是我的老板给我提出的，意思是如果图片过大，就在后台将图片切割成一个一个片段传回客户端，然后客户端自行进行拼接。我没有尝试过。

4、第四种是用用一个较小的图片先代替，等到图片加载完毕再用真正的图片替换掉。

以上的后三种方法都要配合第一种方法使用，效果最佳。

当加载的图片过多时的处理情况：

1、将图片服务和应用服务分离(从架构师的角度思考)

对于这个方案对于经验尚浅的我来说是考虑不多的,通过跟leader沟通,了解到这一点,此方案是架构师在架构过程中必须要考虑到的.

对于服务器来说,图片始终是最消耗系统资源的,如果将图片服务和应用服务放在同一服务器的话,应用服务器很容易会因为图片的高I/O负载而崩溃,所以当网站存在大量的图片读写操作时,建议使用图片服务器.

(注:图片服务器是专门为图片读写操作优化的独立服务器,运行网站的服务器称为应用服务器)

另外浏览器在同一时间对同一域名下的资源的并发请求数目是有限制的,一般在2-6之间,超过限制数目的请求就会被阻塞.

2、图片懒加载

像淘宝或者京东这样的APP页面上有很多图片,当我们滑到下一屏时下一屏的图片才会加载,这就采用了图片懒加载的方式.

图片懒加载,简单来说就是在页面渲染过程中,图片不会一次性全部加载,会在需要的时候加载,比如当滚动条滚动到某一个位置时触发事件加载图片,如下代码:

通过js将img标签的data-src属性赋值给src属性。

详情请看廖雪峰的jquey处理方法：https://www.liaoxuefeng.com/article/00151045553343934ba3bb4ed684623b1bf00488231d88d000

3、css sprites

当网站或者APP有大量小icon,如果上传到图片服务器比如CDN, 要加载所有这些小icon将增加大量请求,而CDN是按流量收费的,这无疑将增加很多成本.

CSS Sprites 技术早已不新鲜,就是将这些小icon合并成一张图片,只需要加载一次,每次通过background-position来控制显示icon,这样就可以节约大量请求,节约成本.

不过这也有一定的缺点:在长期开发多人合作的项目中,会不好维护这些sprites,每次对icon做修改,都得相应的改动css里background-position的值,相当繁琐.

4、将图片压缩成base64格式来节约请求

将图片压缩成base64,随html或者css一起下载到浏览器,不需要额外的请求,这样就节约了请求.

我们知道图片在传输过程中是流传输,如果将图片转换成base64,实际上是变大了,并且浏览器在decode  base64编码的图片时需要耗费很多时间的,所以如果我们选择此种方案的话,最好选择一些小图片,不然得不偿失,在webpack中可以设置最大多少byte的图片压缩成base64

针对decode base64编码的图片比较慢的问题,我们可以选择使用canvas来加速.当向canvas发出绘画命令时,浏览器直接将指令发到图形加速器而不需要开发者更多的干预,硬件图形加速器则以难以执行的运算速度实时绘画和渲染图形.因此,我们可以使用canvas来渲染base64编码后的图片