多种方法实现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 相关文章推荐
使用TextRange获取输入框中光标的位置的代码
Mar 08 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
Dec 01 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
AngularJs  unit-testing(单元测试)详解
Sep 02 Javascript
前端页面文件拖拽上传模块js代码示例
May 19 Javascript
Require.JS中的几种define定义方式示例
Jun 01 Javascript
创建简单的node服务器实例(分享)
Jun 23 Javascript
JS设计模式之单例模式(一)
Sep 29 Javascript
Angular弹出模态框的两种方式
Oct 19 Javascript
vue自定义指令directive实例详解
Jan 17 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
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
2010/11/16 Javascript
jQuery Tools tooltip使用说明
2012/07/14 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
2014/05/04 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
js简单抽奖代码
2015/01/16 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
jQuery 3.0十大新特性最终版发布
2016/07/14 Javascript
js css自定义分页效果
2017/02/24 Javascript
vue2.0全局组件之pdf详解
2017/06/26 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
JavaScript中常见内置函数用法示例
2018/05/14 Javascript
JS实现数组的增删改查操作示例
2018/08/29 Javascript
Vue.js的动态组件模板的实现
2018/11/26 Javascript
js prototype和__proto__的关系是什么
2019/08/23 Javascript
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
用Python进行简单图像识别(验证码)
2018/01/19 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
Keras 加载已经训练好的模型进行预测操作
2020/06/17 Python
Python中Selenium库使用教程详解
2020/07/23 Python
CSS3实现类似翻书效果的过渡动画的示例代码
2019/09/06 HTML / CSS
华为慧通笔试题
2016/04/22 面试题
护理专业推荐信
2013/11/07 职场文书
贷款委托书范本
2014/04/08 职场文书
建筑公司员工自我鉴定
2014/04/08 职场文书
学校与家长安全责任书
2014/07/23 职场文书
初中家长评语大全
2014/12/26 职场文书
经典导游欢迎词
2015/01/26 职场文书
初中军训感想
2015/08/07 职场文书
股东出资协议书
2016/03/21 职场文书
Go Plugins插件的实现方式
2021/08/07 Golang
GO中sync包自由控制并发示例详解
2022/08/05 Golang