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

    ======================================================== 转载请注明出处。
  • 相关阅读:
    Unity3D Asset文件导出3DMax 可编辑格式
    Android 内存管理
    常见面试之机器学习算法思想简单梳理
    最短的计算大数乘法的c程序
    MQTT---HiveMQ源代码具体解释(一)概览
    ZMQ源代码分析(一)-- 基础数据结构的实现
    JavaScript 性能分析新工具 OneProfile
    firefox关于about:config的常用配置
    postgres数据库中的数据转换
    postgres的强制类型转换与时间函数
  • 原文地址:https://www.cnblogs.com/ztfjs/p/5191019.html
Copyright © 2011-2022 走看看