多种方法实现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 相关文章推荐
js tab 选项卡
Apr 26 Javascript
将form表单中的元素转换成对象的方法适用表单提交
May 02 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
jquery操作select方法汇总
Feb 05 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
Nov 07 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
从0开始学Vue
Oct 27 Javascript
利用js获取下拉框中所选的值
Dec 01 Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
Oct 31 Javascript
vue+vant实现购物车全选和反选功能
Nov 17 Vue.js
JS中如何优雅的使用async await详解
Oct 05 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聊天室技术
2006/10/09 PHP
台湾中原大学php教程孙仲岳主讲
2008/01/07 PHP
php利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
jquery select(列表)的操作(取值/赋值)
2011/03/16 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
JavaScript获取URL中参数querystring的方法详解
2016/10/11 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
Angular2.js实现表单验证详解
2017/06/23 Javascript
使用JS动态显示文本
2017/09/09 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
解决Vue router-link绑定事件不生效的问题
2020/07/22 Javascript
jquery实现广告上下滚动效果
2021/03/04 jQuery
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
Python 中Pickle库的使用详解
2018/02/24 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
python3.8下载及安装步骤详解
2020/01/15 Python
如何基于windows实现python定时爬虫
2020/05/01 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
详解使用HTML5的classList属性操作CSS类
2017/10/13 HTML / CSS
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
在校学生职业规划范文
2014/01/08 职场文书
搞笑创意广告语
2014/03/17 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
导游词之塘栖古镇
2019/12/04 职场文书