说明:

-----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,公司项目里用上,自己写的几行代码的更多相关文章

  1. 在页面加载前先出现加载loading,页面加载完成之后再显示页面

    在此加入一个关于页面加载成功之前先展现一个loading的案例: 如下代码写入js里放在html头部即可实现需求:添加的可以自己在css文件设置宽高,也可以放入一个background的gif的loa ...

  2. 八爪鱼采集器︱加载更多、再显示20条图文教程(Xpatth、Ajax)

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 由于代码布置采集器比较麻烦,又很早知道八爪鱼采 ...

  3. php页面加载完毕后再显示购买按钮

    php页面加载完毕后再显示购买按钮 $document.ready(function(){ $("#buybotton").show()})

  4. 利用简洁的图片预加载组件提升h5移动页面的用户体验

    在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http ...

  5. css实现图片未加载完成时占位显示

    通过css控制,可以实现加载网络图片时,未加载完成的时候显示本地一张占位图,加载完成后显示网络图片: 原理:通过在img标签的after伪元素上添加一张占位图,并且img都设置为position:re ...

  6. Android图片异步加载框架Android-Universal-Image-Loader

    版权声明:本文为博主原创文章,未经博主允许不得转载. Android-Universal-Image-Loader是一个图片异步加载,缓存和显示的框架.这个框架已经被很多开发者所使用,是最常用的几个 ...

  7. JS图片懒加载

    简介 当页面图片太多时,加载速度就会很慢.尤其是用2G/3G/4G访问页面,不仅页面慢,而且还会用掉很多流量.图片懒加载的原理就是将页面内所有需要加载的图片全部换成一张默认的图片(一般尺寸很小),只有 ...

  8. 代码: 两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)

    代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...

  9. [iOS微博项目 - 1.8] - 各种尺寸图片加载 & 控件不显示研究

    A. 图片的加载:  [UIImage imageNamed:@"home"];  加载png图片    一.非retina屏幕  1.3.5 inch(320 x 480)  * ...

随机推荐

  1. 使用PowerShell找出具体某个站点所使用的模板(Web Template)名称?

    $web = get-spweb –identity http://servername/sites/site/web #得到站点的对象 $web.WebTemplate #得到WebTemplate ...

  2. 【转】Apache 配置虚拟主机三种方式

    Apache 配置虚拟主机三种方式  原文博客http://www.cnblogs.com/hi-bazinga/archive/2012/04/23/2466605.html 一.基于IP 1. 假 ...

  3. UI控件(UIWebView)

    本文主要记录UIWebView三方面内容: 1.基本的加载网页链接或文件: 2.网页js调用原生,也就是Cordova混合架构的原理: 3.原生调用js程序: 原生部分主要代码: @implement ...

  4. LibSVM for Python 使用

    经历手写SVM的惨烈教训(还是太年轻)之后,我决定使用工具箱/第三方库 Python libsvm的GitHub仓库 LibSVM是开源的SVM实现,支持C, C++, Java,Python , R ...

  5. Web前端开发工程师养成计划【转载】

    Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国 ...

  6. MySQL mysqlslap压测

    200 ? "200px" : this.width)!important;} --> 介绍 mysqlslap是mysql自带的一个性能压测工具:mysqlslap用于和其 ...

  7. 基于Spring Mvc实现的Excel文件上传下载

    最近工作遇到一个需求,需要下载excel模板,编辑后上传解析存储到数据库.因此为了更好的理解公司框架,我就自己先用spring mvc实现了一个样例. 基础框架 之前曾经介绍过一个最简单的spring ...

  8. selenium结合最新版的sikuli使用

    sikuli安装,下载sikulixsetup-1.1.0.jar,地址:https://launchpad.net/sikuli/sikulix/1.1.0 在装有Java环境的机器上直接双击jar ...

  9. CSS3学习总结3-3D与动画

    前言:这是篇CSS3中关于3D效果与动画相关的内容. (1)在CSS3的3D效果中,需要结合透视perspective的属性才能看到3d的效果,这个属性在屏幕上实现了元素近大远小的效果,所以要使用CS ...

  10. 开源地图SharpMap源码解析-(1)简介

    1.简介 SharpMap最新版基于.NET Framework 4,采用C#开发的地图渲染引擎,非常易于使用.我这次研究的是比较稳定发布的V1.1版本.可以在GitHub下载该源码,地址:https ...