多种方法实现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 相关文章推荐
用JavaScript实现单继承和多继承的简单方法
Mar 29 Javascript
JavaScript 原型学习总结
Oct 29 Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 Javascript
ajax级联菜单实现方法实例分析
Nov 28 Javascript
AngularJS执行流程详解
Feb 17 Javascript
Webpack中css-loader和less-loader的使用教程
Apr 27 Javascript
vue-cli脚手架-bulid下的配置文件
Mar 27 Javascript
JavaScript中this关键字用法实例分析
Aug 24 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
Nov 06 Javascript
微信公众号生成新浪短网址的实现(快速生成)
Aug 18 Javascript
JS如何生成随机验证码
Mar 02 Javascript
js通过canvas生成图片缩略图
Oct 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
全国FM电台频率大全 - 12 安徽省
2020/03/11 无线电
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
php魔术变量用法实例详解
2014/11/13 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
javascript 写类方式之四
2009/07/05 Javascript
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
基于jquery 的一个progressbar widge
2010/10/29 Javascript
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
JS求平均值的小例子
2013/11/29 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
2016/05/25 Javascript
angular基于路由控制ui-router实现系统权限控制
2016/09/27 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
2019/04/14 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
python入门之语句(if语句、while语句、for语句)
2015/01/19 Python
python executemany的使用及注意事项
2017/03/13 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
python调用自定义函数的实例操作
2019/06/26 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
《姥姥的剪纸》教学反思
2014/02/25 职场文书
入党思想汇报怎么写
2014/04/03 职场文书
党课心得体会范文
2014/09/09 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
专家推荐信范文
2015/03/26 职场文书
php 原生分页
2021/04/01 PHP
从结婚开始的恋爱故事。小说《我的美好婚事》TV动画化决定
2022/04/07 日漫
python中redis包操作数据库的教程
2022/04/19 Python