JavaScript Image对象预加载与缓存行为差异解析

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”，只有当用户点击按钮触发addImg函数时，才会发起图片加载请求。图片加载完成后，会触发onload事件，并将图片元素添加到文档中。如果是首次加载该图片，上述流程运行正常。但如果用户重复点击按钮，不同浏览器的表现会出现显著差异。

在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的加载速度过快，导致在onload事件处理器被追加之前，图片已经加载完成，从而错过了事件触发？

加载不存在图片时的行为测试

为了验证这一点，我们尝试加载一张不存在的图片，观察各浏览器的反应：

 
<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 Image()时complete为false，但随后立即变为true。如果加载一张从未见过的图片，Firefox和Chrome的行为则趋于一致：加载过程中complete为false，加载完成后变为true。

事件绑定顺序的关键结论

测试还揭示了一个重要结论：脚本执行顺序确实会影响onload等事件的绑定效果。如果在图片加载完成后才追加事件处理程序，将失去实际意义。鉴于JavaScript的解释型语言特性，在绑定事件时，务必确保事件处理程序的注册发生在触发该事件的操作（如设置src）之前。