多种方法实现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 相关文章推荐
读jQuery之十三 添加事件和删除事件的核心方法
Aug 23 Javascript
javascript中的onkeyup和onkeydown区别介绍
Apr 28 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
Aug 15 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
详解webpack 如何集成第三方js库
Jun 29 Javascript
用vue封装插件并发布到npm的方法步骤
Oct 18 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
Nov 07 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 Javascript
微信小程序 wx:for遍历循环使用实例解析
Sep 09 Javascript
layui表格数据复选框回显设置方法
Sep 13 Javascript
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
使用 JavaScript 制作页面效果
Apr 21 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中cookies使用指南
2007/03/16 PHP
认识并使用PHP超级全局变量
2010/01/26 PHP
php中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
PHP7匿名类用法分析
2016/09/26 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
Javascript 自定义类型方法小结
2010/03/02 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
2010/04/23 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
用javascript添加控件自定义属性解析
2013/11/25 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
js实现同一页面多个不同运动效果的方法
2015/04/10 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
2016/03/29 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
node.js 如何监视文件变化
2020/09/01 Javascript
[02:59]DOTA2完美大师赛主赛事第三日精彩集锦
2017/11/25 DOTA
python下实现二叉堆以及堆排序的示例
2017/09/29 Python
Ubuntu下使用Python实现游戏制作中的切分图片功能
2018/03/30 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
浅谈python中get pass用法
2019/03/19 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
Keras实现支持masking的Flatten层代码
2020/06/16 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
如何通过Python实现RabbitMQ延迟队列
2020/11/28 Python
北美领先的智能产品购物网站:Wellbots
2018/06/11 全球购物
生产车间实习自我鉴定
2013/09/23 职场文书
家长对孩子的评语
2014/04/18 职场文书
保密协议书范本
2014/04/22 职场文书
学习雷锋标语
2014/06/25 职场文书
调研汇报材料范文
2014/08/17 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书