图片全部加载完成之后再显示页面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{
$('.zhezhao1').remove();
}
}
}
//加载超时 10秒
setTimeout(function(){
$('.zhezhao1').remove();
},10000);
图片全部加载完成之后再显示页面ui,公司项目里用上,自己写的几行代码的更多相关文章
- 在页面加载前先出现加载loading,页面加载完成之后再显示页面
在此加入一个关于页面加载成功之前先展现一个loading的案例: 如下代码写入js里放在html头部即可实现需求:添加的可以自己在css文件设置宽高,也可以放入一个background的gif的loa ...
- 八爪鱼采集器︱加载更多、再显示20条图文教程(Xpatth、Ajax)
每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 由于代码布置采集器比较麻烦,又很早知道八爪鱼采 ...
- php页面加载完毕后再显示购买按钮
php页面加载完毕后再显示购买按钮 $document.ready(function(){ $("#buybotton").show()})
- 利用简洁的图片预加载组件提升h5移动页面的用户体验
在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http ...
- css实现图片未加载完成时占位显示
通过css控制,可以实现加载网络图片时,未加载完成的时候显示本地一张占位图,加载完成后显示网络图片: 原理:通过在img标签的after伪元素上添加一张占位图,并且img都设置为position:re ...
- Android图片异步加载框架Android-Universal-Image-Loader
版权声明:本文为博主原创文章,未经博主允许不得转载. Android-Universal-Image-Loader是一个图片异步加载,缓存和显示的框架.这个框架已经被很多开发者所使用,是最常用的几个 ...
- JS图片懒加载
简介 当页面图片太多时,加载速度就会很慢.尤其是用2G/3G/4G访问页面,不仅页面慢,而且还会用掉很多流量.图片懒加载的原理就是将页面内所有需要加载的图片全部换成一张默认的图片(一般尺寸很小),只有 ...
- 代码: 两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)
代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...
- [iOS微博项目 - 1.8] - 各种尺寸图片加载 & 控件不显示研究
A. 图片的加载: [UIImage imageNamed:@"home"]; 加载png图片 一.非retina屏幕 1.3.5 inch(320 x 480) * ...
随机推荐
- 安装mysql
查看已安装的mysql,并删除它们 rpm -qa|grep -i mysql rpm -e --nodeps filename 如果重装mysql,查找安装mysql产生的文件,并删除它们 find ...
- Android应用安全开发之浅谈加密算法的坑
<Android应用安全开发之浅谈加密算法的坑> 作者:阿里移动安全@伊樵,@舟海 阿里聚安全,一站式解决应用开发安全问题 Android开发中,难免会遇到需要加解密一些数据内 ...
- C#之委托与事件
委托与事件 废话一堆:网上关于委托.事件的文章有很多,一千个哈姆雷特就有一千个莎士比亚,以下内容均是本人个人见解. 1. 委托 1.1 委托的使用 这一小章来学习一下怎么简单的使用委托,了解一些基本的 ...
- 七天学会ASP.NET MVC (六)——线程问题、异常处理、自定义URL
本节又带了一些常用的,却很难理解的问题,本节从文件上传功能的实现引出了线程使用,介绍了线程饥饿的解决方法,异常处理方法,了解RouteTable自定义路径 . 系列文章 七天学会ASP.NET MVC ...
- 京东招聘Java开发人员
软件开发工程师(JAVA) 岗位职责: 1. 负责京东核心业务系统的需求分析.设计.开发工作 2. 负责相关技术文档编写工作 3. 解决系统中的关键问题和技术难题 任职要求: 1. 踏实诚恳.责任心强 ...
- eclipse启动时报告错误:Java was started but returned exit code=-805306369
这两天也没改过eclipse和java的配置,但eclipse启动时报告错误:Java was started but returned exit code=-805306369 后来在eclipse ...
- Java学习笔记(04)
Java学习笔记(04) 如有不对或不足的地方,请给出建议,谢谢! 一.对象 面向对象的核心:找合适的对象做合适的事情 面向对象的编程思想:尽可能的用计算机语言来描述现实生活中的事物 面向对象:侧重于 ...
- IL指令汇总
名称 说明 名称 说明 Add 将两个值相加并将结果推送到计算堆栈上. Ldelem.I1 将位于指定数组索引处的 int8 类型的元素作为 int32 加载到计算堆栈的顶部. Add.Ovf ...
- Leetcode-2 Add Two Numbers
#2. Add Two Numbers You are given two linked lists representing two non-negative numbers. The digits ...
- php安装的一点点事 ---wampserver
安装wampserver后,需要配置一些文件 1. 首先修改httpd.conf <Directory /> Options FollowSymLinks AllowOverride No ...