zoukankan      html  css  js  c++  java
  • 图片全部加载完成之后再显示页面ui,公司项目里用上,自己写的几行代码

    说明:

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

    -----求大神指正~

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

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

    //loding
                            
     //创建一个显示loding字样的遮罩        
    var zhezhao1 = "<div class='zhezhao1' style='100%;height:"+$(window).height()+"px; position:fixed; top: 0; left: 0; z-index:2999;'>";
                                 zhezhao1 += "<div class='zhezhaobg' style='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; 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);

    ======================================================== 转载请注明出处。
  • 相关阅读:
    Circular vector
    【杂题】进制转换
    【POJ】3006
    【POJ】1503
    【POJ】2262
    【POJ】1083
    【POJ】2739
    对拍
    【POJ】2159
    【POJ】3299
  • 原文地址:https://www.cnblogs.com/ztfjs/p/5191019.html
Copyright © 2011-2022 走看看