多种方法实现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 相关文章推荐
静态的动态续篇之来点XML
Aug 15 Javascript
用js判断浏览器是否是IE的比较好的办法
May 08 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
Jul 31 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
Jun 28 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
apply和call方法定义及apply和call方法的区别
Nov 15 Javascript
JavaScript中数据类型转换总结
Dec 25 Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
使用vue实现一个电子签名组件的示例代码
Jan 06 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
Ajax PHP简单入门教程代码
2008/04/25 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
PHP获取ttf格式文件字体名的方法示例
2019/03/06 PHP
file模式访问网页时iframe高度自适应解决方案
2013/01/16 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
Jquery实现的简单轮播效果【附实例】
2016/04/19 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
2017/09/21 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
Bootstrap实现下拉菜单多级联动
2017/11/23 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
Python三元运算实现方法
2015/01/12 Python
python通过floor函数舍弃小数位的方法
2015/03/17 Python
Python base64编码解码实例
2015/06/21 Python
Django 解决上传文件时,request.FILES为空的问题
2020/05/20 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
新闻学专业大学生职业生涯规划范文
2014/03/02 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
无毒社区工作方案
2014/05/23 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
大学新生军训自我鉴定
2014/09/18 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
父亲节活动总结
2015/02/12 职场文书
大班下学期个人总结
2015/02/13 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
新生儿未入户证明
2015/06/23 职场文书
2015年中秋寄语
2015/07/31 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书
创业项目(超低成本创业项目)
2019/08/16 职场文书