JavaScript图片预加载与跨浏览器缓存行为深度解析

JavaScript图片预加载基础示例

JavaScript实现图片预加载的简单示例

function loadImage(url, callback) {
if(url!='null') {
var img = new Image();
img.src = url;
if(img.complete) {
callback(img);
} else {
img.onload = function(){
img.onload = null;
callback(img);
            } 
        }
    } 
}
loadImage(pic_url,loadImage);

Image对象与DOM操作的异步加载实践

另一个详细详解示例

通过JavaScript操作DOM通常是为了实现与当前页面HTML元素的异步加载。这里谈谈对Image对象的一些理解。看一个例子：

<input type="button" name="" value="载入图片" onclick="addImg('tt.jpg')" />
<script type="text/javascript">
<!--
function addImg(isrc)
    {
var Img = new Image();
Img.src = isrc;
Img.onload = function ()
        {
document.body.appendChild(Img);
        }
    }
//-->
</script>

当包含上述代码的页面打开时并不会立即载入“tt.jpg”，只有当点击按钮时才会开始载入。载入完成后触发onload事件，将图片显示在页面上。

跨浏览器缓存行为差异分析

如果是第一次加载“tt.jpg”这张图片，运行正常。点击按钮加载并显示一张图片，如果重复点击会怎么样呢？

在IE和Opera浏览器中，除了第一次加载图片时显示正常，之后再点击就没有反应了，刷新页面也一样。难道它们只触发一次“onload”事件？这是缓存机制导致的吗？

在Firefox和Chrome浏览器中，每次点击都会加载并显示一张该图片。

稍微修改一下代码顺序：

<input type="button" name="" value="载入图片" onclick="addImg('tt.jpg')" />
<script type="text/javascript">
<!--
function addImg(isrc)
    {
var Img = new Image();
Img.onload = function ()
        {
document.body.appendChild(Img);
        }
Img.src = isrc;
    }
//-->
</script>

运行后发现，奇怪的事情发生了。所有浏览器表现一致，每次点击都会加载一张图片。这又是什么原因？由此可以看出，IE和Opera在执行过程中并不是只触发一次onload事件！

complete与readyState属性深度解析

联想一下Image对象的一些属性看看，complete、readyState（IE专属值[uninitialized,complete]）（为防止缓存影响效果请更换图片名称！）

<input type="button" name="" value="complete" onclick='alert("complete : "+Img.complete +"\nreadyState : "+Img.readyState)' />
<input type="button" name="" value="载入图片" onclick="addImg('mtm.jpg')" />
<script type="text/javascript">
<!--
var Img;
function addImg(isrc)
    {
Img = new Image();
//Img.src = isrc;
Img.onload = function ()
        {
alert("complete : "+Img.complete +"\nreadyState : "+Img.readyState)
document.body.appendChild(Img);
        }
Img.src = isrc;
    }
//-->
</script>

经过以上测试，可以看出一些不同点，对于complete属性来讲，IE是根据图片是否显示过来判断，就是说当加载的图片显示出来后，

complete属性的值才为true，否则一直是false，和以前是否加载过该张图片没有关系，即和缓存没有关系！

但是其它浏览器表现出来的确不一样，只要以前加载过该图，浏览器有缓存，complete就为true，

这和IE的readyState属性的表现一致！

至此，可以肯定的是所有浏览器都会缓存图片！可是上面的问题到底是什么原因导致的呢？

众所周知，从缓存里加载东西的速度是很快的，那么在

Img.src = isrc;
Img.onload = ...

的过程中，难道IE和Opera加载的速度快到，来不及追加事件？

异常加载情况下的浏览器行为测试

这回加载一张根本不存在的图片看看效果：

<input type="button" name="" value="complete" onclick='alert("complete : "+Imgttmt.complete +"\nreadyState : "+Imgttmt.readyState)' />
<input type="button" name="" value="载入图片" onclick="addImg('mtmttyt.jpg')" />
<script type="text/javascript">
<!--
var Imgttmt;
function addImg(isrc)
    {
Imgttmt = new Image();
Imgttmt.src = isrc;
alert("complete : "+Imgttmt.complete +"\nreadyState : "+Imgttmt.readyState)
Imgttmt.onload = function ()
        {
alert("impossible")
        }
    }
//-->
</script>

可以肯定的是所有浏览器都不触发onload事件。从是否缓存或已经加载过图片的角度讲，IE和Opera表现正常，complete始终为false；

IE的readyState始终为uninitialized。令人疑惑的是Firefox，其中Imgttmt.complete的值一直是true；更令人困惑的是Chrome，它是在最初

new Imgttmt()的时候Imgttmt.complete值为false。而之后Imgttmt.complete值就一直为true了！如果换一张从来没有加载过的图片，

Firefox和Chrome的行为就一致了，都是一开始加载时，Imgttmt.complete值为false，之后为true！

测试的过程中还发现，脚本的执行顺序的确会影响到类似于onload等事件的追加，如果在其显示后在追加事件就没有什么实际意义了！基于JavaScript这种解释性语言的特性，在追加事件的时候一定要注意把事件追加在触发该事件的句柄之前。