常用图片预加载方式

为什么使用图片预加载
为什么会考虑使用图片预加载呢？你是否曾有个网站，在那个网站你要滚动你的导航然后有个延迟直到图片被加载完……预加载将在这方面帮助你。

它将在页面加载的时候加载那些图片并将其存储在浏览器的缓存里面。这样当用户滚动导航的时候，很漂亮而且流畅，没有延迟。

下面整理常用的图片预加载：

1.使用纯的css进行图片预加载

body:after {
    content: "";
    display: block;
    position: absolute;
    background: 
    url("../image/manage/help/01.png") no-repeat -10000px -1000px,
    url("../image/manage/help/02.png") no-repeat -10000px -1000px,
    url("../image/manage/help/03.png") no-repeat -10000px -1000px,
    url("../image/manage/help/04.png") no-repeat -10000px -1000px,
    url("../image/manage/help/05.png") no-repeat -10000px -1000px,
    width: 0;
    height: 0
}

2.使用纯javascript进行图片预加载

(function(){
    var imgSrcArr = [
        'image/1.png',
        'image/2.png',
        'image/3.png',
        'image/4.png',
        'image/5.png',
        'image/6.png',
        'image/7.png'
    ];
    var imgWrap = [];
    function preloadImg(arr) {
        for(var i =0; i< arr.length ;i++) {
            imgWrap[i] = new Image();
            imgWrap[i].src = arr[i];
        }
    }
    setTimeout(function(){preloadImg(imgSrcArr)},5000)
}());

3.使用css+js方式进行图片预加载

.preload-img:after{
    content: "";
    display: block;
    position: absolute;
    background: 
    url("../image/manage/help/01.png") no-repeat -10000px -1000px,
    url("../image/manage/help/02.png") no-repeat -10000px -1000px,
    url("../image/manage/help/03.png") no-repeat -10000px -1000px,
    url("../image/manage/help/04.png") no-repeat -10000px -1000px,
    url("../image/manage/help/05.png") no-repeat -10000px -1000px,
    width: 0;
    height: 0
}
 
/*
    比如我们写了上面的这样一个类，但是页面中没有用到，我们在文档加载完毕之后，给某个元素添加该类
*/
 $("#target").addClass("preload-img")