多种方法实现load加载完成后把图片一次性显示出来


Posted in Javascript onFebruary 19, 2014

方法一:

<script type=”text/javascript”> 
var obj = new Image(); 
obj.src = “yourpicurl.jpg”; 
obj.onload = function() { //这个地方可以重复写入,如果错误的话,换到外面即可 
document.getElementById(”mypic”).innnerHTML = “<img src='”+this.src+”‘ />”; 
} 
</script> 
<div id=”mypic”>onloading……</div>

方法二:
<script type=”text/javascript”> 
var obj = new Image(); 
obj.src = “yourpicurl.jpg”; 
obj.onreadystatechange = function() { 
if ( this.readyState == “complete”) { //这个地方可以重复写入,如果错误的话,换到外面即可 
document.getElementById(”mypic”).innnerHTML = “<img src='”+this.src+”‘ />”; 
} 
} 
</script> 
<div id=”mypic”>onloading……</div>

方法三:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
</head> 
<script language="javascript" src="/js/jquery-1.4.4.js" type="text/javascript"> 
</script> 
<script language="javascript" type="text/javascript"> 
<!--//var total;var curt = 0;$(document).ready(function() 
{ 
total = $("#content img").length; 
$("#content img").each(function(){ var image = new Image(); 
image.src = $(this).attr('src'); 
if (image.complete){ 
imageLoaded(); 
} 
else{ 
image.onload = imageLoaded; 
} 
}); 
}); 
function imageLoaded(){ 
curt+=1; 
if(curt==total){ 
$("#content").show(); 
}}//--> 
</script> 
</head> 
<body> 
<div id="content" style="display:none;" > 
<img src="" /> 
<img src="" /> 
<img src="" /> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
硬盘浏览程序,保存成网页格式便可使用
Dec 03 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
Oct 26 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
Jan 10 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 Javascript
ES6扩展运算符用法实例分析
Oct 31 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
May 27 Javascript
微信小程序数据统计和错误统计的实现方法
Jun 26 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
Jul 11 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
Aug 07 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
Nov 02 Javascript
jquery无刷新验证邮箱地址实现实例
Feb 19 #Javascript
js左右弹性滚动对联广告代码分享
Feb 19 #Javascript
javascript异步编程的4种方法
Feb 19 #Javascript
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 #Javascript
javascript函数重载解决方案分享
Feb 19 #Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 #Javascript
使用CSS样式position:fixed水平滚动的方法
Feb 19 #Javascript
You might like
php正则修正符用法实例详解
2016/12/29 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
2017/03/24 jQuery
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
详解node+express+ejs+bootstrap构建项目
2017/09/27 Javascript
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
node省市区三级数据性能测评实例分析
2019/11/06 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
vue3使用vue-count-to组件的实现
2020/12/25 Vue.js
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
从零学Python之入门(三)序列
2014/05/25 Python
wxPython学习之主框架实例
2014/09/28 Python
Python入门篇之对象类型
2014/10/17 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
Pandas时间序列:时期(period)及其算术运算详解
2020/02/25 Python
Python是什么 Python的用处
2020/05/26 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
金宝贝童装官网:Gymboree
2016/08/31 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述。
2015/11/09 面试题
企事业单位求职者的自我评价
2013/12/28 职场文书
领导失职检讨书
2014/02/24 职场文书
小学母亲节活动方案
2014/03/14 职场文书
空乘英文求职信
2014/04/13 职场文书
社团活动总结书
2014/06/27 职场文书
寒假社会实践个人总结
2015/03/06 职场文书
实习单位鉴定意见
2015/06/04 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
理解python中装饰器的作用
2021/07/21 Python
Python办公自动化PPT批量转换操作
2021/09/15 Python
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang