图片预加载

提前加载所需要的图片资源，加载完毕后会缓存到本地，当需要时可以立马显示出来，以达到在预览的过程中，无需等待直接预览的良好体验。

图片预加载分类：

1. 无序加载
2. 有序加载

预加载的缺点：

1. 预加载会占用较多的后台资源，因为可能一次性加载较多的图片

2. 预加载需要比较长的时间 ，一般是利用用户进行其他操作时进行。（如漫画是在用户看上一个图片时进行预加载 ） 。 或者是在等待的这段时间显示其他。（如显示进度条。）

图片预加载方案

利用 CSS 实现预加载

该方法只需将欲加载的图片 url 写入某个隐藏元素的 background 属性中，让这张图片和 CSS 文件同时加载。当用户触发显示图片的事件时，再将图片插入到目标位置。

如下代码所示，这里用到 CSS3 的 background 多图片特性，只需一个隐藏元素即可预加载所有图片。

.nothing-1 {
  display: none;
  background: url("1.jpg"), url("2.jpg"), url("3.jpg");
}

该方法的缺点在于无法控制预加载的时机，只能是页面加载时一起加载图片，如果图片过多，会阻塞页面的 load 事件，延长页面加载时间。

只利用 JavaScript 实现预加载

直接使用 JavaScript 新建 Image 对象，对其 src 属性赋值。

var image = new Image();
image.src = '...img url';
image.onload = function() { ... }
image.onerror = function () { ... }

还可以利用 Image 对象的 load 事件和 error 事件，完成图片预加载和失败之后的处理，如所有图片加载完成后的提示等。

利用 Ajax 实现预加载

直接发送 ajax 请求，获取图片资源。同样，可将 ajax 请求成功与失败的回调，作为图片预加载成功与失败的处理。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
      ...
    }
  }
}
xhr.open("GET", '...img url');
xhr.send('');

Ajax 请求方法无需多余的 Image 对象，而且获取的资源也不仅局限于图片。