图片预加载

之前做一个静态界面的时候出现了这么个情况：
具体是这样的，虽然没有js脚本，但是有一个鼠标悬浮切换图片的效果，就是当鼠标悬浮，背景图的url改变。
但是遇到一个bug，就是第一次鼠标悬浮的时候，图片先变为空，然后才显示另一张图。
问题在于在鼠标悬浮时才触发url改变，但这个时候图片还是没加载的，因此在加载过程中会出现一段时间的空白。
解决方法就是图片要预加载。

css———开始就将所有图片加载出来

实现方法也容易，在html中创建一个空div，并将其background的url设置成图片地址，这样所有图片就一起加载不会出现留白的现象。
但是这样带来的问题也很明显，导致开始加载时间变得很长，尤其是当图很多的时候这样是非常不好的。

js————用new Image()

var images = new Array();
function preload() {  
    for (let i = 0; i < preload.arguments.length; i++) {    
        images[i] = new Image();    
        images[i].src = preload.arguments[i];  
    }
}

然后调用这个函数：

1	preload("./pic1.jpg", "./pic2.jpg", "./pic3.jpg");

这样更适用于加载大量的图片，但是还需要改进，因为我希望其他图片延迟预加载时间。
做个判断是否页面加载完成,传递一个函数作为参数。

function loadEvent(funct) {  
    if (typeof window.onload !== 'function') {    
        window.onload = funct;  
    } else {    
        window.onload = function() {      
            if (window.onload) {        
                window.onload();      
            }      
            funct();    
        }  
    }
}
loadEvent(preload);

ajax———不影响当前页面-除了图片还可以用于预加载js和css

window.onload = function() {  
    setTimeout(function() {    
        var xhr = new XMLHttpRequest();    
        xhr.open('GET', './preload.png');    
        xhr.send('');    
        new Image().src = "./preload.png"  
    }, 1000);        //防止脚本挂起，页面异常
}

预加载js和css也差不多，加载文件不会应用到加载页面上。