多种方法实现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 相关文章推荐
类似CSDN图片切换效果脚本
Sep 17 Javascript
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
javascript制作坦克大战全纪录(2)
Nov 27 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
js漂浮广告实现代码
Aug 15 Javascript
Vue框架中正确引入JS库的方法介绍
Jul 30 Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 Javascript
vue中如何去掉空格的方法实现
Nov 09 Javascript
VUE引入第三方js包及调用方法讲解
Mar 01 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
Sep 23 Javascript
js中关于Blob对象的介绍与使用
Nov 29 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 操作文件的一些FAQ总结
2009/02/12 PHP
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
基于PHP字符串的比较函数strcmp()与strcasecmp()的使用详解
2013/05/15 PHP
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
给ECShop添加最新评论
2015/01/07 PHP
javascript实现的一个随机点名功能
2014/08/26 Javascript
jQuery插件pagination实现分页特效
2015/04/12 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
Angularjs实现多个页面共享数据的方式
2016/03/29 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
JQuery.dataTables表格插件添加跳转到指定页
2017/06/09 jQuery
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
简单了解常用的JavaScript 库
2020/07/16 Javascript
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
python基于物品协同过滤算法实现代码
2018/05/31 Python
总结python中pass的作用
2019/02/27 Python
Python简易版停车管理系统
2019/08/12 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
numpy ndarray 按条件筛选数组,关联筛选的例子
2019/11/26 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
美国宠物护理专家:Revival Animal Health
2020/01/05 全球购物
岗位职责的含义
2013/11/17 职场文书
文明学生事迹材料
2014/01/29 职场文书
《藤野先生》教学反思
2014/02/19 职场文书
上课看小说检讨书
2014/02/22 职场文书
十佳中学生事迹材料
2014/06/02 职场文书
大学活动总结模板
2014/07/10 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL
docker-compose部署Yapi的方法
2022/04/08 Servers