Javascript 映像交换不适用于 IE8

Question

我有一个简单的脚本，当您单击缩略图图像时，它会交换div中的图像。就像一个图片库。在IE 9及更高版本以及chrome Firefox等中完美运行。只是不在IE8中，它将交换图像1或2次，然后它就会停止工作。我从另一个论坛上得到了这个脚本，在脚本方面我是一个新手。我将不胜感激任何建议。这是JavaScript。

<script type="text/javascript" 
src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.thumbnail').live("click", function() {
        $('#mainImage').hide();
        $('#imageWrap').css('background-image', "url('images/main/ajax-loader.gif')");
        var i = $('<img />').attr('src',this.href).load(function() {
            $('#mainImage').attr('src', i.attr('src'));
            $('#imageWrap').css('background-image', 'none');
            $('#mainImage').fadeIn();
        });
        return false; 
    });
});
</script>

这是 html

<div id="imageWrap">
<img src="images/main/blue.JPG" alt="Main Image" id="mainImage"/>
</div>
<!-- thumbnails are links to the full size image -->
<a href="images/main/blue.JPG" class="thumbnail"><img src="images/main/blue_thumb.JPG" alt="Image 1"/></a>
<a href="images/main/green.JPG" class="thumbnail"><img src="images/main/green_thumb.JPG" alt="Image 2"/></a>
<a href="images/main/red.JPG" class="thumbnail"><img src="images/main/red_thumb.JPG" alt="Image 3"/></a>
<a href="images/main/purple.JPG" class="thumbnail"><img src="images/main/purple_thumb.JPG" alt="Image 4"/></a> 

和 CSS

#imageWrap {
width: 640px;
height: 510px;
background: url(../../images/main/ajax-loader.gif) center center no-repeat;

}

这是我拥有的示例的链接。

http://www.rkshootingsupply.com/test

Answer 1

您的问题是您在添加事件侦听器之前设置了图像的源。首次更改src时，会从服务器请求它，这需要一点时间;这意味着事件侦听器有机会在图像加载之前附加，并随后触发 Load 事件。然后，当您下次加载图像时，IE 会从其本地缓存中提取图像，并在附加事件之前触发加载事件。这将导致 JavaScript 不知道图像已加载，因此不会在页面上更新它。

这是修改后的代码，

它在附加事件侦听器后更改源代码。

$(document).ready(function() {
    $('.thumbnail').live("click", function() {
        $('#mainImage').hide();
        $('#imageWrap').css('background-image', "url('images/main/ajax-loader.gif')");
        var i = $('<img />').load(function() {
            $('#mainImage').attr('src', i.attr('src'));
            $('#imageWrap').css('background-image', 'none');
            $('#mainImage').fadeIn();
        }).attr('src',this.href);
        return false; 
    });
});