多种方法实现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 相关文章推荐
可缩放Reloaded-一个针对可缩放元素的复用组件
Mar 10 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
Nov 24 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
Jul 02 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
Aug 18 Javascript
Angular 理解module和injector,即依赖注入
Sep 07 Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
Mar 13 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
JavaScript实现简单的四则运算计算器完整实例
Apr 28 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
详解JavaScript 为什么要有 Symbol 类型?
Apr 03 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
第十一节 重载 [11]
2006/10/09 PHP
php关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
PHP中source #N问题的解决方法
2014/01/27 PHP
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
javascript打印html内容功能的方法示例
2013/11/28 Javascript
使用jquery操作session方法分享
2015/01/22 Javascript
JavaScript返回网页中锚点数目的方法
2015/04/03 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
2017/02/14 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
详解封装基础的angular4的request请求方法
2018/06/05 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
跟老齐学Python之网站的结构
2014/10/24 Python
用python实现面向对像的ASP程序实例
2014/11/10 Python
Python使用Beautiful Soup包编写爬虫时的一些关键点
2016/01/20 Python
Python实现TCP协议下的端口映射功能的脚本程序示例
2016/06/14 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
高考考python编程是真的吗
2020/07/20 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
加拿大领先家居家具网上购物:Aosom.ca
2020/05/27 全球购物
产品售后服务承诺书
2014/05/21 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
初中优秀学生评语
2014/12/29 职场文书
圆明园观后感
2015/06/03 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android