用jQuery加载图像:IE9中的附加请求 [英] Loading image with jquery: Additional request in IE9

问题描述

我有这样的页面:

<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)中，一切正常.但是，当我使用"F12开发人员工具"在IE9中监视网络时，每次鼠标经过链接时，都会有额外的图像请求.但是在FF和Chrome中，通过使用FireBug和Developer工具进行检查，对于每个图像，只有一个请求，而第二次您浏览链接时，则没有请求.

Every thing work fine in different browser(FF10,Chrome,IE9). But when I monitor network in IE9 with "F12 developer tools", every time that mouse goes over a link, there is a aditional request for image. But in FF and Chrome, by checking with FireBug and Developer tools, for each image, there is just one requst and second time you go over a link, there is no request.

• IE9(或我的代码；)有什么问题?

• what is the problem with IE9 (or my code ;))?

我的问题是否还有其他解决方案可以防止此问题发生?

Is there any other solutions for my problem to prevent from this problem?

(实际上，我想要Yahoo Hot新闻之类的东西，即对于每个新闻图片，它的请求都被调用一次，即使在IE9中也是如此).

(Actually I want something like Yahoo Hot news, that for every news image, its request just called once, even in IE9).

推荐答案

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

You are not checking if you have already loaded the current image; therefore, it will reload it even though it is already there. Some of the browsers were probably using a cached version of the image and therefore did not go get it again.

$(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);
    });
});

修改:

在我们的谈话中，我写下了以下内容，这也是您所指的吗?

From our conversation I wrote up the following, is it what you were referring too?

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

实时演示

这篇关于用jQuery加载图像:IE9中的附加请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！