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 相关文章推荐
轻轻松松学习JavaScript
Feb 25 Javascript
学习ExtJS fit布局使用说明
Oct 08 Javascript
两个JavaScript jsFiddle JSBin在线调试器
Mar 14 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
JavaScript中的this关键字使用详解
Aug 14 Javascript
JS代码防止SQL注入的方法(超简单)
Apr 12 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
Aug 24 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
Vue 图片压缩并上传至服务器功能
Jan 15 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
JavaScript的function函数详细介绍
Nov 20 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实现递归循环每一个目录
2010/08/08 PHP
PHP求最大子序列和的算法实现
2011/06/24 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
javascript eval和JSON之间的联系
2009/12/31 Javascript
JavaScript中的函数声明和函数表达式区别浅析
2015/03/27 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
2016/01/14 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
基于jquery的on和click的区别详解
2018/01/15 jQuery
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
Python中正则表达式的详细教程
2015/04/30 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
Pycharm以root权限运行脚本的方法
2019/01/19 Python
关于Python作用域自学总结
2019/06/10 Python
Python装饰器用法与知识点小结
2020/03/09 Python
简单了解django处理跨域请求最佳解决方案
2020/03/25 Python
Django REST 异常处理详解
2020/07/15 Python
html5简介及新增功能介绍
2020/05/18 HTML / CSS
百思买加拿大:Best Buy Canada
2018/03/20 全球购物
大学生求职自荐信
2013/12/12 职场文书
技校毕业生自荐信范文
2014/03/07 职场文书
绩效工资实施方案
2014/03/15 职场文书
科技节口号
2014/06/19 职场文书
“学党章、守党纪、讲党规”学习心得体会
2016/01/14 职场文书
初三数学教学反思
2016/02/17 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书
详解Javascript实践中的命令模式
2021/05/05 Javascript
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL
利用Pycharm连接服务器的全过程记录
2021/07/01 Python
Nginx的基本概念和原理
2022/03/21 Servers