多种方法实现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 相关文章推荐
javascript 动态参数判空操作
Dec 22 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
Jun 01 Javascript
JavaScript面向对象(极简主义法minimalist approach)
Jul 17 Javascript
Javascript中神奇的this
Jan 20 Javascript
Javascript中的Prototype到底是什么
Feb 16 Javascript
动态加载js文件简单示例
Apr 21 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
Sep 07 Javascript
浅谈vue-cli 3.0.x 初体验
Apr 11 Javascript
利用layer实现表单完美验证的方法
Sep 26 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 Javascript
element跨分页操作选择详解
Jun 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 操作符与控制结构
2012/03/07 PHP
php var_export与var_dump 输出的不同
2013/08/09 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
php中请求url的五种方法总结
2017/07/13 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
2013/01/23 Javascript
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
js密码强度校验
2015/11/10 Javascript
javascript实现简单的全选和反选功能
2016/01/05 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
2019/01/08 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
2019/04/18 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
编写Python的web框架中的Model的教程
2015/04/29 Python
python实现文本去重且不打乱原本顺序
2016/01/26 Python
python实现将excel文件转化成CSV格式
2018/03/22 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
Python3 pickle对象串行化代码实例解析
2020/03/23 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
PHP如何自定义函数
2016/09/16 面试题
技校生自我鉴定范文
2013/09/26 职场文书
学生会个人自荐书范文
2014/02/12 职场文书
竞选班长的演讲稿
2014/04/24 职场文书
英语求职信范文
2014/05/23 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
中小企业员工手册范本
2015/05/14 职场文书
深入理解Vue的数据响应式
2021/05/15 Vue.js