图片全部加载完成之后再显示页面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{

        }

    }

    //加载超时  10秒

    setTimeout(function(){

        $('.zhezhao1').remove();

    },10000);

========================================================

转载请注明出处。