Question

我有这样一个页面：

<script type="text/javascript">
    $(function () {
        $("#links a").mouseover(function () {
            $("#flag").attr("src", "/Images/" + $(this).attr("id") + ".png");
        });
    });
</script>
<div>
    <img id="flag" src="/Images/austria.png" alt="austria" />
</div>
<div id="links">
    <a id="austria" href="#">austria</a>
    <a id="brazil" href="#">brazil</a> 
    <a id="japan" href="#">japan</a>
</div>

在不同的浏览器（FF10，Chrome，IE9）中，每件事都可以正常工作。但是，当我使用＆＃34; F12开发人员工具＆＃34;监控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 ：

<div class="flag"> <img id="flag" src="/Images/austria.png" alt="austria" /> </div> <div id="links"> <a id="austria" href="#">austria</a> <a id="brazil" href="#">brazil</a> <a id="japan" href="#">japan</a> </div>

<强>的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('<img id="flag" src="/Images/' + imageID + '.png" alt="' + imageID + '" />'); }); });

Live DEMO

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

1 个答案: