实现原理

浏览器对于http get请求是有缓存功能的。

同一个网页内，如果已经加载过一张图片的话，再次请求这张图片（URL一样），浏览器将不会发起http请求，而是从缓存中取出图片并返回，status code为304。

很幸运的是，浏览器提供的web api里面有一个Image类，语句new Image()将会创建一个新的HTMLImageElement实例，等价于 document.createElement('img')。

所以我们可以通过Image实例达到缓存功能。

实现代码

核心代码如下：

function preLoadPicture(pictureURL) {
  let cachePicture = new Image()
  cachePicture.scr = pictureURL
  return cachePicture
}

为了提高用户体验，可以在document的DOMContentLoaded事件和window的load事件中预加载图片。

参考

实现图片预加载的几种方式
Image()