1

我有这样一个页面：

<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）中都能正常工作。但是当我在 IE9 中使用“F12 开发人员工具”监控网络时，每次鼠标经过链接时，都会额外请求图像。但是在 FF 和 Chrome 中，通过使用 FireBug 和开发工具检查，对于每个图像，只有一个请求，而第二次浏览链接时，没有请求。

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

  • 是否有其他解决方案可以解决我的问题以防止出现此问题？

（实际上我想要像 Yahoo Hot news 这样的东西，对于每个新闻图像，它的请求只调用一次，即使在 IE9 中也是如此）。

4

1 回答 1

0

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

$(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 + '" />');
    });
});

现场演示

于 2012-05-15T12:35:01.153 回答