用new Image()预先加载图片真的有用吗？

预加载图片的误区

最新推荐文章于 2025-09-01 17:11:13 发布

最新推荐文章于 2025-09-01 17:11:13 发布 · 1.1k 阅读

文章标签：

#IE #CSS #浏览器 #Apache #Cache

本文通过实验探讨了使用newImage()预加载图片的有效性。结果显示，即使图片已预加载，当图片源发生变化时，浏览器仍会发送新的请求加载图片，这与预期中利用缓存避免重复加载的行为不符。

经常会用到在网页上交替显示图片。很多推荐的作法是用new Image() 预先装载图片。但是用new Image()真的有用吗？

试验：

在后台放一个过滤器捕捉所有 /* 的请求：

doFilter里面简单的打印请求的URL：

[code]

HttpServletRequest httpRequest = (HttpServletRequest) request;
System.out.println("requets url: " + httpRequest.getRequestURI());
chain.doFilter(request, response);

[/code]

html代码：

[code]
<body>
<script>
var t1 = new Image();
t1.src = 'ico_unchecked.gif';

function change(){
im.src = t1.src;
}
</script>
<button onclick="change()">change</button>
<img id="im" src="ico_checked.gif">
</body>
[/code]

可以看到打印了三次url。html页面的请求一次。t1.src设值的时候一次。<img src="">的时候一次。

我想这时候如果按按钮改变页面上的图片，应该不会再从服务端载图片了，因为缓存里面已经有了嘛。可是点的时候过滤器仍然是有打印出URL！

看来只要image对象的src一被改变就会发出请求。那预先装载图片不是等于没用吗？