web圖片預加載的幾種方式

類似H5和一些動畫元素都需要提前加載完一些圖片
如果圖片在使用之前就已經請求過了，
那麼再次使用的時候，就不會再去請求（ps：圖片路徑一樣）。

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")

4.使用ajax方式進行圖片預加載

 $.get('https://www.baidu.com/imgres.jpg');