多种方法实现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传值 判断
Oct 26 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
Sep 01 Javascript
javascript数组遍历的方法实例分析
Sep 13 Javascript
jQuery解析XML 详解及方法总结
Sep 28 Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
mint-ui在vue中的使用示例
Apr 05 Javascript
JavaScript设计模式之享元模式实例详解
Jan 17 Javascript
原生JS实现的跳一跳小游戏完整实例
Jan 27 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
VUE+elementui面包屑实现动态路由详解
Nov 04 Javascript
Node.js中的异步生成器与异步迭代详解
Jan 31 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简单封装了一些常用JS操作
2007/02/25 PHP
使用 MySQL Date/Time 类型
2008/03/26 PHP
PHP字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
PHP实现重载的常用方法实例详解
2017/10/18 PHP
js资料prototype 属性
2007/03/13 Javascript
JavaScript继承方式实例
2010/10/29 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
JavaScript提高性能知识点汇总
2016/01/15 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
javascript 数据存储的常用函数总结
2017/06/01 Javascript
layui框架中layer父子页面交互的方法分析
2017/11/15 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
python print 按逗号或空格分隔的方法
2018/05/02 Python
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
python三引号输出方法
2019/02/27 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
python tkinter控件布局项目实例
2019/11/04 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
Staples美国官方网站:办公用品一站式采购
2016/07/28 全球购物
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
大学生职业生涯十年规划书范文
2014/09/17 职场文书
年底个人总结范文
2015/03/10 职场文书
运动会广播稿200字
2015/08/19 职场文书