javascript图片预加载（2）
作者：heroguang 来源：heroguang的日志 发布时间：2009-08-30 12:47:00
不过，做到这一步，先别高兴太早——还需要考虑一下浏览器的兼容性，于是，赶紧到ie里边测试一下。没错，同样弹出了图片的宽度。但是，再点击load的时候，情况就不一样了，什么反应都没有了。刷新一下，也同样如此。
经过对多个浏览器版本的测试，发现ie6、opera都会这样，而firefox和safari则表现正常。其实，原因也挺简单的，就是因为浏览器的缓存了。当图片加载过一次以后，如果再有对该图片的请求时，由于浏览器已经缓存住这张图片了，不会再发起一次新的请求，而是直接从缓存中加载过来。对于 firefox和safari，它们视图使这两种加载方式对用户透明，同样会引起图片的onload事件，而ie和opera则忽略了这种同一性，不会引起图片的onload事件，因此上边的代码在它们里边不能得以实现效果。
怎么办呢?最好的情况是Image可以有一个状态值表明它是否已经载入成功了。从缓存加载的时候，因为不需要等待，这个状态值就直接是表明已经下载了，而从http请求加载时，因为需要等待下载，这个值显示为未完成。这样的话，就可以搞定了。
经过一些分析，终于发现一个为各个浏览器所兼容的Image的属性——complete。所以，在图片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对象
};
};
经过这么一番折腾，总算是让各个浏览器都能满足我们的目标了。虽然代码很简单，但是却把图片浏览器中最核心的问题解决掉了，接下来你所要做的，仅仅是图片如何呈现的问题了。
0
投稿猜你喜欢
MVC设计模式MVC (Model-View-Controller) 是软件工程中常用的软件架构模式，它是一种分离业务逻辑与显示界面的设计方- 一、概念介绍箱型图（box-plot)，又称为箱线图，盒型图，盒须图。在数据探索阶段或者描述性分析过程中，我们常常用于展示多类连
- 在做数据库修改或删除操作中，可能会导致数据错误，甚至数据库奔溃，而有效的定时备份能很好地保护数据库。本篇文章主要讲述Navicat for
- CAS单点登录主要是为了解决主系统和子系统的统一登录问题，能够做到任意一个子系统登录成功后，再登录其他子系统后不再需要认证，让用户不用重复地
- Pytorch的数据类型为各式各样的Tensor,Tensor可以理解为高维矩阵。与Numpy中的Array类似。Pytorch中的tens
- 闲着没事看到国外一个酷站欣赏的网站不错，不过他是用FLASH做的，于是想着用JS也写一个看看，技术有限写的不是很完美，还有一些小的BUG不知
- 上一篇文章写到原生js取代jquery的一些常用函数：原生js仿jquery一些常用方法，那么，ajax如何实现呢？如下是一个比较完整的aj
- 代码如下:Class XMLClass Private objXml Private xmlDoc Private xmlPath '
- 1、如何放弃正在输入的命令。 在输入一条比较长的命令时，出现打字错误是在所难免的。在这种情况下，放弃正在输入的命令重头再来往往会是更好的选择
- SOAP.py 客户机和服务器SOAP.py 包含的是一些基本的东西。没有 Web 服务描述语言（Web Services Descript
- 本篇文章面向的读者： 已经基本掌握Go中的 协程(goroutine)，通道(channel)，互斥锁(sync.Mutex)，读
- 需求问题在日常工作中，对于前端发送过来的请求，后端django大部分都是采用json格式返回，也有采用模板返回视图的方式。在模板返回视图的方
- pandas获取groupby分组里最大值所在的行方法如下面这个DataFrame,按照Mt分组，取出Count最大的那行import pa
- 本文实例讲述了python连接、操作mongodb数据库的方法。分享给大家供大家参考，具体如下：数据库连接 from pymongo imp
- 本文实例主要实现给出任意字符串，获取字符串中某字符的位置以及出现的总次数。实现该功能代码的时候可以使用函数enumerate来将字符串分离成
- 本文实例讲述了JavaScript预解析及相关技巧。分享给大家供大家参考，具体如下：变量同样，以这两个小例子的错误对比提示开始。alert(
- 继续还是工作中使用colly，不管是官网，还是网上的一些文章(其实90％就是把官网的案例抄过去)，都是一样的格式，没有讲到post，测试了几
- 最近着迷上了 Python用Python给小宝做的数学算数口算练习程序(2015年1月添加四则运算)!给小宝做的口算游戏：#用Python给
- 一、javascript是面向对象的编程语言封装：把相关的信息(无论数据或方法)存储在对象中的能力聚集：把一个对象存储在另一个对象内的能力继
- css的流行导致了标签的流行，很直观，看起来很清爽。流行的一部分，还有很多种功能强大且美观的导航。。。1. Change.org2. N.D
