图片全部加载完成之后再显示页面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) * ...
随机推荐
- SQL Server数据库镜像的页面自动修复原理
SQL Server数据库镜像的页面自动修复原理 主库页面损坏 镜像库页面损坏 LSN用来保证事务的时序 LSN保存在每个数据页面的页头 在同一台机器,内存中的数据页和磁盘中的数据页保持同步依靠的是数 ...
- AWS 免费套餐
AWS 免费套餐 转载自:https://aws.amazon.com/cn/free/?sc_channel=PS&sc_campaign=acquisition_CN&sc_pub ...
- Microsoft dotnetConf 2015 一些整理
dotnetConf 2015 直播计划: 第一天 (10 个主讲) - .NET Product Teams 主讲人为 .NET 产品开发团队,.NET 产品主要包含 .NET Core.ASP.N ...
- 解读ASP.NET 5 & MVC6系列(6):Middleware详解
在第1章项目结构分析中,我们提到Startup.cs作为整个程序的入口点,等同于传统的Global.asax文件,即:用于初始化系统级的信息(例如,MVC中的路由配置).本章我们就来一一分析,在这里如 ...
- .NET面试题系列[12] - C# 3.0 LINQ的准备工作
"为了使LINQ能够正常工作,代码必须简化到它要求的程度." - Jon Skeet 为了提高园子中诸位兄弟的英语水平,我将重要的术语后面配备了对应的英文. .NET面试题系列目录 ...
- Android知识杂记(四)
1.完整退出activity的设计思路 1.1 封装一个基础activity类 public abstract class RootActivity extends FragmentActivity{ ...
- 【大型网站技术实践】初级篇:搭建MySQL主从复制经典架构
一.业务发展驱动数据发展 随着网站业务的不断发展,用户量的不断增加,数据量成倍地增长,数据库的访问量也呈线性地增长.特别是在用户访问高峰期间,并发访问量突然增大,数据库的负载压力也会增大,如果架构方案 ...
- 迷你MVVM框架avalon在兼容旧式IE做的努力
很多时候,写代码就像砌砖头,只要我们不关心盖楼的原因.建筑的原理.土木工程基础和工程经验,就算我们砌了100栋高楼,我们也就只是一个砌砖工人,永远也成为不了一个工程师,更别说建筑师了.而那些包工头也只 ...
- 企业IT管理员IE11升级指南【7】—— Win7和Win8.1上的IE11功能对比
企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...
- MySQL 权限
create user创建用户 CREATE USER li@localhost IDENTIFIED BY 'li'; 授予用户li数据库person的所有权限,并允许用户li将数据库person的 ...