前言

在网页中一次性加载很多张图片是一个非常消耗性能的事情，通常需要配合懒加载和预加载来达到性能优化的方案。如果图片不是一次性出现在可视区域的可以采用懒加载的方式，但是如果是一次性出现的话就需要通过预加载和浏览器缓存来去做优化了。

预加载

所谓的预加载，其实就是提前加载一遍图片。并且服务端配置协商缓存。我们将预加载这一步放置在页面的loading阶段，同时在服务端响应头上配置一下协商缓存（如果图片资源不变的话也可以使用强缓存）。这样等加载过一遍之后，关闭loading页就可以做到秒开了。所有的资源都会走缓存。 下面就来说一下怎么做吧

demo

实现上其实非常简单，只需要通过new Image这个对象的src属性赋值一下就会出发网络请求。然后再他的onload或者onerror事件里去记数就可以了

let img = new Image()
img.src = 'xxx'
img.onload = function (){
    console.log('加载完成')
}
img.onerror = function (){
    console.log('加载失败')
}

new Image的妙用

new Image在实际应用中还可以作为埋点，心跳包来发请求，他不会占用网络请求限额，同时也不需要网页面里插入dom。开销非常的小。只需要在onload和onerror里来处理成功失败即可