首页 > 其他 > 详细

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

时间:2016-02-15 18:14:14      阅读:332      评论:0      收藏:0      [点我收藏+]

 

说明:

-----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);

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

原文:http://www.cnblogs.com/ztfjs/p/5191019.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!