图片预加载和懒加载（2）——预加载

预加载的方式有三种：

　　

 第一种：用css和js实现预加载（此方式加载时间较长）

　　在文档加载完毕后，将图片加载到背景图中，但是不显示出来，添加样式；

background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; 

　　感兴趣的可以参考：https://www.csdn.net/article/2013-10-15/2817187-3-ways-preload-images-css-javascript-ajax

第二种：仅使用js实现预加载

var array = [
    "http://php.txdu.club/images/1.jpg",
    "http://php.txdu.club/images/2.jpg",
    "http://php.txdu.club/images/3.jpg",
    "http://php.txdu.club/images/4.jpg",
    "http://php.txdu.club/images/5.jpg",
    "http://php.txdu.club/images/6.jpg",
    "http://php.txdu.club/images/7.jpg",
    "http://php.txdu.club/images/8.jpg",
    "http://php.txdu.club/images/9.jpg",
    "http://php.txdu.club/images/10.jpg"
]

let count = 0;  //统计已加载数
function yuJiaZai() {
    let img = [];
    for (let i = 0; i < array.length; i++) {
        img[i] = new Image();
        img[i].src = array[i];
        img[i].onload = () => {
            count++;    
            console.log(count/array.length);
        }
    }
}
window.onload = yuJiaZai();

　　感兴趣的可以参考：https://www.jianshu.com/p/39daf79ef1dd

第三种：使用Ajax实现预加载（该方法不仅仅预加载图片，还预加载CSS和JS等相关内容，简化页面）

　　本质：就是将第一第二的css或者js放在服务器，然后用过ajax加载

　　就不多讲了，详情参考：https://www.csdn.net/article/2013-10-15/2817187-3-ways-preload-images-css-javascript-ajax