多种方法实现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 相关文章推荐
uploadify 3.0 详细使用说明
Jun 18 Javascript
JavaScript编写推箱子游戏
Jul 07 Javascript
如何用angularjs制作一个完整的表格
Jan 21 Javascript
vue.js实现价格格式化的方法
May 23 Javascript
mui框架移动开发初体验详解
Oct 11 Javascript
微信小程序tabBar用法实例详解
Dec 04 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
小程序实现发表评论功能
Jul 06 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
Sep 25 Javascript
vue-lazyload使用总结(推荐)
Nov 01 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
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
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
php如何实现数据库的备份和恢复
2020/11/30 PHP
Gambit vs CL BO3 第三场 2.13
2021/03/10 DOTA
JavaScript TO HTML 转换
2006/06/26 Javascript
Prototype使用指南之base.js
2007/01/10 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
前台js对象在后台转化java对象的问题探讨
2013/12/20 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
jQuery实现用户输入自动完成功能
2017/02/13 Javascript
JavaScript实现换肤功能
2017/09/15 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
2017/12/07 Javascript
vue中的mescroll搜索运用及各种填坑处理
2019/10/30 Javascript
JavaScript变量Dom对象的所有属性
2020/04/30 Javascript
Python enumerate遍历数组示例应用
2008/09/06 Python
Python中的引用和拷贝浅析
2014/11/22 Python
Python实现获取操作系统版本信息方法
2015/04/08 Python
基于循环神经网络(RNN)实现影评情感分类
2018/03/26 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
python matplotlib imshow热图坐标替换/映射实例
2020/03/14 Python
python自动化办公操作PPT的实现
2021/02/05 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
大学生的应聘自我评价
2013/12/13 职场文书
工业自动化毕业生自荐信范文
2014/01/04 职场文书
对公司合理化的建议书
2014/03/12 职场文书
授权委托书怎么写
2014/09/25 职场文书
采购员岗位职责范本
2015/04/07 职场文书
辩论赛新闻稿
2015/07/17 职场文书
python爬虫之selenium库的安装及使用教程
2021/05/23 Python
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
mysql函数全面总结
2021/11/11 MySQL