图片全部加载完成之后再显示页面ui，公司项目里用上，自己写的几行代码

 

说明：

-----onload事件   这里我并没有考虑ie的兼容性 因为项目是移动端的；

-----求大神指正~

-----自己测试正常 页面没加载完之前会有一个提示

/*******************************下面是代码*************************************/

//loding
                        
 //创建一个显示loding字样的遮罩        
var zhezhao1 = "<div class='zhezhao1' style='width:100%;height:"+$(window).height()+"px; position:fixed; top: 0; left: 0; z-index:2999;'>";
                             zhezhao1 += "<div class='zhezhaobg' style='width:100%;height:100%; background-color:#000000;opacity:0.8;'><\/div>";
                             zhezhao1 += "<div style='position:absolute;top:0;bottom:0;left:0;right:0; margin:auto; width:3rem;height:1rem; font-size:0.6rem; color:#ffcb99;'>LODING...<\/div>"
                             zhezhao1 +="</div>";
//把所有的img文件放到数字imgattr里    并事先准备好对象变量 循环变量 imglength;
var imgattr=new Array(),i=0,imgatrlen,imgobj=new Array();
    $('body').append(zhezhao1);
    imgattr = [
        '/jiuzhuang/img/bz-bg.jpg',
        '/jiuzhuang/img/content-tibg.jpg',
        '/jiuzhuang/img/dl.png',
        '/jiuzhuang/img/leftbar-bg.png',
        '/jiuzhuang/img/leftbar-bg2.png',
        '/jiuzhuang/img/leftbaricon.png',
        '/jiuzhuang/img/main-bg.jpg',
        '/jiuzhuang/img/offsrk-bg.jpg',
        '/jiuzhuang/img/_MG_2825.jpg',
        '/jiuzhuang/img/qywh.jpg'
    ];
    imgatrlen = imgattr.length;
    var loadlen = 0;
    //这里用了一个递归函数
    lodingpo(i,imgatrlen);
    function lodingpo(i,imgatrlen){
        imgobj = new Image();
        imgobj.src=imgattr[i];
        //加载完成loadlen++   并且形成一个递归循环
        imgobj.onload = function(){
            loadlen++;
            if(loadlen>=loadlen){
                $('.zhezhao1').remove();
            }
            i++;
            if(i<imgatrlen){
                lodingpo.callee(i,imgatrlen);
            }else{
                $('.zhezhao1').remove();
            }
        }
    }
    //加载超时  10秒
    setTimeout(function(){
        $('.zhezhao1').remove();
    },10000);