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 相关文章推荐
js限制文本框只能输入数字(正则表达式)
Jul 15 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
Nov 12 Javascript
js实现遮罩层划出效果是生成div而不是显示
Jul 29 Javascript
js中document.write的那点事
Dec 12 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
Sep 18 Javascript
详解webpack自动生成html页面
Jun 29 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
May 15 Javascript
vue项目中使用vue-i18n报错的解决方法
Jan 13 Javascript
js实现3D照片墙效果
Oct 28 Javascript
Javascript实现秒表计时游戏
May 27 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为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
PHP也能干大事 随机函数
2015/04/14 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
用nodejs写的一个简单项目打包工具
2013/05/11 NodeJs
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
2014/03/03 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
jquery实现图片预加载
2015/12/25 Javascript
JavaScript构造函数详解
2015/12/27 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
Python Queue模块详解
2014/11/30 Python
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
python3解析库lxml的安装与基本使用
2018/06/27 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
python 实现IP子网计算
2021/02/18 Python
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
英文求职信结束语大全
2013/10/26 职场文书
装饰活动策划方案
2014/02/11 职场文书
人力资源职位说明书
2014/07/29 职场文书
大学生团员个人总结
2015/02/14 职场文书
Python if else条件语句形式详解
2022/03/24 Python
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python