圖檔全部加載完成之後再顯示頁面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);

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

轉載請注明出處。