使用jquery加载图像：IE9中的附加请求

我有这样一个页面：

 $(function () { $("#links a").mouseover(function () { $("#flag").attr("src", "/Images/" + $(this).attr("id") + ".png"); }); });  
  
 
 austria brazil japan  

在不同的浏览器（FF10，Chrome，IE9）中，每件事都可以正常工作。 但是，当我使用“F12开发人员工具”在IE9中监控网络时，每次鼠标越过链接时，都会有一个附加的图像请求。 但是在FF和Chrome中，通过检查FireBug和开发人员工具，对于每个图像，只有一个请求，第二次通过链接，没有请求。

• IE9（或我的代码;））有什么问题？

• 我的问题还有其他解决方案可以防止这个问题吗？

（实际上我想要雅虎热门新闻，对于每个新闻图片，它的请求只调用一次，即使在IE9中）。

Answer 1

您没有检查是否已加载当前图像; 因此，它会重新加载它，即使它已经存在。 一些浏览器可能使用了图像的缓存版本，因此没有再次获取它。

 $(function () { $("#links a").mouseover(function () { var $flag = $("#flag"); var newImage = "/Images/" + $(this).attr("id") + ".png"; if ($flag.attr("src").indexOf(newImage) == -1) $flag.attr("src", newImage); }); }); 

编辑 ：

从我们的谈话中我写下了以下内容，你也指的是什么？

HTML ：

 
  
 
 austria brazil japan 
​​​ 

Javascript ：

 $(function () { $("#links a").mouseover(function () { var $flag = $(".flag");; var $flagImg = $("#flag"); var imageID = $(this).attr("id"); if ($flagImg.attr("src").indexOf(imageID) == -1) $flag.html(''); }); }); 

现场演示