图片预加载的实现

图片预加载说白了就是将所有所需的图片提前请求加载到本地，这样后面在需要用到时就直接从缓存取图片 。图片预加载的原理很简单：new Image()，然后使用onload方法回调预加载完成事件，当浏览器把图片下载到本地后，之后同样的src就直接使用缓存。

无序加载

// 所有的图片（要是网络太好，自己加图片吧）
const imgs = [
    "http://op2clp53n.bkt.clouddn.com/20161104122758_cap-hpi.jpg",
    "http://op2clp53n.bkt.clouddn.com/500414621%20%281%29.jpg",
    "http://op2clp53n.bkt.clouddn.com/cover_bg.png",
    "http://img.aotu.io/mamboer/post-aotu.jpg",
    "http://misc.aotu.io/o2/img/books/books-cover.jpg",
    "http://img.aotu.io/Yettyzyt/cover.png",
    "http://img.aotu.io/wengeek/responsive-image.png",
    "https://gw.alicdn.com/tfs/TB1_6wnRXXXXXbwXFXXXXXXXXXX-900-500.jpg",
    "http://op2clp53n.bkt.clouddn.com/_138.jpg",
    "http://op2clp53n.bkt.clouddn.com/0_ocs_fin_cov_1.jpg",
    "http://op2clp53n.bkt.clouddn.com/2voyage.jpg",
    "http://op2clp53n.bkt.clouddn.com/boa_illustrations_master_fb_1200x628-12.jpg",
    "http://op2clp53n.bkt.clouddn.com/building_science_bulletin_cover_2__1x.jpg",
    "http://op2clp53n.bkt.clouddn.com/building-science-bulletin-cover_1x.jpg",
    "http://op2clp53n.bkt.clouddn.com/chemistry4_1x.png",
    "http://op2clp53n.bkt.clouddn.com/first_colony_dribbble_copy.jpg"
];
let len = imgs.length;

/**
 * 遍历imgs数组，将所有图片加载出来
 * 可以通过控制台查看网络请求，会发现所有图片均已加载
 */
for (let i = 0; i < len; i++) {