js 判断图片是否加载完以及实现图片的预下载


Posted in Javascript onAugust 14, 2014

创建一个Image对象,实现图片的预下载,如果图片已经存在于浏览器缓存,直接调用回调函数,使用onload事件可以判断图片是否加载完成

function loadImage(url, callback) { 
var img = new Image(); //创建一个Image对象,实现图片的预下载 
img.src = url; 

if(img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数 
callback.call(img); 
return; // 直接返回,不用再处理onload事件 
} 
img.onload = function () { //图片下载完毕时异步调用callback函数。 
callback.call(img);//将回调函数的this替换为Image对象 
}; 
};
</pre><pre code_snippet_id="395795" snippet_file_name="blog_20140617_3_4709132" name="code" class="html"><pre name="code" class="html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>判断图片是否加载完成</title> 

</head> 
<body> 
<img id="img2" src="images/1.jpg" /> 
</body> 
</html> 
<script language="JavaScript"> 
document.getElementById("img2").onload = function () { 
alert("图片加载已完成"); 
} 
</script>
Javascript 相关文章推荐
DOM 基本方法
Jul 18 Javascript
IE中createElement需要注意的一个问题
Jul 13 Javascript
Javascript下判断是否为闰年的Datetime包
Oct 26 Javascript
js中AppendChild与insertBefore的用法详细解析
Dec 16 Javascript
js控住DOM实现发布微博效果
Aug 30 Javascript
js实现文字超出部分用省略号代替实例代码
Sep 01 Javascript
ES6新特性七:数组的扩充详解
Apr 21 Javascript
基于vue实现swipe分页组件实例
May 25 Javascript
Vue中android4.4不兼容问题的解决方法
Sep 04 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
Apr 17 Javascript
vue 自定义右键样式的实例代码
Nov 06 Javascript
JavaScript架构localStorage特殊场景下二次封装操作
Jun 21 Javascript
js创建表单元素并使用submit进行提交
Aug 14 #Javascript
使用typeof判断function是否存在于上下文
Aug 14 #Javascript
java、javascript实现附件下载示例
Aug 14 #Javascript
js怎么判断flash swf文件是否加载完毕
Aug 14 #Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
Aug 14 #Javascript
JQuery Tips相关(1)----关于$.Ready()
Aug 14 #Javascript
javascript实现获取cookie过期时间的变通方法
Aug 14 #Javascript
You might like
一些php技巧与注意事项分析
2011/02/03 PHP
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
CodeIgniter配置之autoload.php自动加载用法分析
2016/01/20 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
Javascript 写的简单进度条控件
2008/01/22 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
2013/08/02 Javascript
浅析JavaScript中的常用算法与函数
2013/11/21 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
2017/03/22 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
wxPython的安装图文教程(Windows)
2017/12/28 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
python中matplotlib条件背景颜色的实现
2019/09/02 Python
python定义类self用法实例解析
2020/01/22 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
视图的作用
2014/12/19 面试题
《只有一个地球》教学反思
2014/02/14 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
教育基金募捐倡议书
2014/05/14 职场文书
市场营销策划方案
2014/06/11 职场文书
金融管理专业求职信
2014/07/10 职场文书
领导欢迎词范文
2015/01/26 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
2017春节晚会开幕词
2016/03/03 职场文书
MySQL生成千万测试数据以及遇到的问题
2022/08/05 MySQL