多种方法实现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 相关文章推荐
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
Javascript对象属性方法汇总
Nov 21 Javascript
Extjs4中的分页应用结合前后台
Dec 13 Javascript
jQuery验证插件 Validate详解
Nov 20 Javascript
深入分析Javascript事件代理
Jan 30 Javascript
canvas实现环形进度条效果
Mar 23 Javascript
基于Vuejs和Element的注册插件的编写方法
Jul 03 Javascript
vue页面使用阿里oss上传功能的实例(二)
Aug 09 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 Javascript
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
移动端(微信等使用vConsole调试console的方法
Mar 05 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
Mar 27 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实现对象克隆的方法
2015/06/20 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
JavaScript中的排序算法代码
2011/02/22 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
jQuery实现下拉菜单的实例代码
2017/06/19 jQuery
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
Vue自定义事件(详解)
2017/08/19 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
js实现简易拖拽的示例
2020/10/26 Javascript
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
详解python的ORM中Pony用法
2018/02/09 Python
Numpy之random函数使用学习
2019/01/29 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
为什么group by 和order by会使查询变慢
2014/05/16 面试题
linux面试题参考答案(8)
2016/04/19 面试题
介绍一下gcc特性
2015/10/31 面试题
证婚人经典证婚词
2014/01/09 职场文书
2014年班组建设工作总结
2014/12/01 职场文书
代理词怎么写
2015/05/25 职场文书
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS
Python 如何实现文件自动去重
2021/06/02 Python
Nginx防盗链与服务优化配置的全过程
2022/01/18 Servers