基于JQuery的图片预加载~

html：

<span class="progress"><!-- 这只是一个用来显示加载进度的容器 --></span>

 

js：

$(function(){
        /*loadingImg  图片预加载*/
    var loadingImg = function(picr, callback){
        var index = 0;
        var length = picr.length;
        var img = new Image();
        var fls = false;
        var progress = function(n){
            $('.progress').html(n);   //percentage这只是一个用来显示加载进度的容器     
        }
        var loading = function(){
            img.src = picr[index];
            img.onload = function() {
                progress(Math.floor(((index + 1) / length) * 100) + "%");
                index ++ ;
                //progress(index+1);        //查看错误路径位置 +1 【从0开始 所以 +1】
                if (index < length) {
                    loading();
                }else{
                    callback()
                }
            }
            return img;
        }
        if(length > 0){
            loading();
        }else{
            progress("100%");
        }
        return {
            picr: picr,
            loading: loading,
            progress: progress
        };
    }
    var picr = [
        'img/1title.png',
        'img/2title.png',
        'img/3title.png',
        'img/11title.png',
        'img/22title.png',
        'img/33title.png',
        'img/ai.png',
        'img/bg01.png',
        'img/bg02.png',
        'img/boy_1.png',
        'img/boy_2.png',
        'img/chick.png',
        'img/chick_love.png',
        'img/man2.png',
        'img/man3.png',
        'img/title_2.png',
        'img/woman.png'
    ];
     // 初始化 load
    loadingImg(picr, function(){
       alert('123');     //加载完成之后执行的事件
    });
})  

 

转载于:https://www.cnblogs.com/sugege/p/6638437.html