Question

作为艺术家的Wordpress网站的一部分，我制作了一个简单的jQuery图像交换周期，用于每个自定义帖子。基本上，只是一张下面有照片信用的大图像，下面是一组七个缩略图，用于显示艺术作品的不同视图。单击每个缩略图会切换缩略图中href的当前大图像以及交换照片积分。照片来源使用隐藏的div和.hideText类，每个缩略图包含由PHP提供的相关摄影师姓名。

所有功能在Firefox，Chrome，Opera和IE中都能正常运行＆gt; 8.在IE8中，在第一次加载时，可以按顺序单击每个图像以生成相应的大图像，但是在单击第七个缩略图或单击直线数字序列后导致大图像不显示，尽管href仍然正确。注意：使用jQuery 1.8.2和Modernizr 2.6.2。

除了IE8的bug之外，我还有其他三个烦恼值得一提。 1）使用.load（）会产生缓慢的加载时间，直到缓存图像。我想我应该使用预加载器，但不知道如何使用此设置。 2）由于大图像加载缓慢，绝对定位的照片信用有时首先显示在错误的位置，直到img加载。理想情况下，jQuery照片信用块将被链接以遵循图像加载代码以避免这种情况;我尝试使用匿名函数来做到这一点，但无法使它工作，所以.delay（）是一个hackish和不可靠的替代品。 3）单击时，应在隐藏旧图像之前添加#artWrap背景微调器，并在新图像淡入后删除它，但它不能一致地工作。

考虑到意外的时间投入，回想起来我可能会使用WP图像库插件，但我想了解这些东西。欢迎任何建议！

相关jQuery：

$('.thumbnail').live("click", function() {

$('#artWrap').css('background-image', "url('../img/ajax-loader-48-48.gif')");
$('#artLarge').hide();

var i = $('<img />').attr('src',this.href).load(function() {
    $('#artLarge').attr('src', i.attr('src'));
    $('#artLarge').fadeIn(200);     
    $('#artWrap').css('background-image', 'none');
});

if ( $(this).find('.hideText').is(':empty') ) {
    $('#photoCredit').hide().empty();
} else {
    $('#photoCredit').hide().empty();
    var newCredit = $(this).find('.hideCredit').html();
    $('#photoCredit').html(newCredit).delay(600).fadeIn(200);
}

return false;

});

...

基本div结构：

<div id="artShow">  

    <div id="artWrap" >

        <div id="artImage">
            <img id="artLarge" src="../uploads/EXAMPLE_1-LG.jpg">
        </div><!-- #artImage -->

        <div id="photoCredit">
            Photo: Example 1 Photographer
        </div><!-- .artCredit -->

    </div><!-- #artWrap -->

    <div id="artThumbs" class="clearfix">

        <div id="thumb1" class="thumb">
            <a href="../uploads/EXAMPLE_1-LG.jpg" class="thumbnail nofancybox"><!-- large image link goes in href here -->
                <img src="../uploads/EXAMPLE_1-SM.jpg" width="72" height="72" ><!-- small image -->
            </a>
            <div class="hideCredit">Photo: Example 1 Photographer</div>

        </div><!-- #thumb1 -->

        <div id="thumb2" class="thumb">
            <a href="../uploads/EXAMPLE_2-LG.jpg" class="thumbnail nofancybox">
                <img src="../uploads/EXAMPLE_2-SM.jpg" width="72" height="72" >
            </a>
        <div class="hideCredit">Photo: Example 2 Photographer</div>

        </div><!-- #thumb2 -->

        <div id="thumb3" class="thumb"> ... ETC ... </div>
        <div id="thumb4" class="thumb"> ... ETC ... </div>
        <div id="thumb5" class="thumb"> ... ETC ... </div>
        <div id="thumb6" class="thumb"> ... ETC ... </div>
        <div id="thumb7" class="thumb"> ... ETC ... </div>

    </div><!-- #artThumbs -->

</div><!-- #artShow -->

...

相关CSS：

/* Content shell for whole image swap show */
#artShow { float: right; position: relative; width: 630px; min-height: 570px; }

/* wrap for both image and photo credit */
#artWrap { float: left; position: relative; background: url('../img/ajax-loader-48-48.gif') center center no-repeat; }

/* wrapper for large image */
#artImage { min-height: 456px; margin-bottom: 19px; line-height: 0;  /* lh adjusts photo credit */ }

/* ID attached to large img */
#artLarge { }  

/* photo credit below artImage */
#photoCredit { 
position: absolute;
right: 0;
bottom: -5px;
height: 16px;
padding-top: 3px;
width: 100%;
text-align: right;
}

#artThumbs { position: absolute; top: 492px; left: 0; width: 651px; height: 72px; }

.thumb { float: left; margin-right: 21px; width: 72px; height: 72px; background-color: #c9c9c9; }

.thumbnail { display: block; width: 72px; height: 72px; }

Answer 1

使用您提供的暂存网址进行一些调试后，我想我可以看到问题所在。

似乎图像的.load()函数（AM_main.js的第57行）仅在第一次加载图像时被调用。如果第二次单击相同的图像，则不会调用load()函数。

这是因为图像已经加载，因此当您再次加载图像时，它就位于浏览器缓存中。这里发生的事情是load事件是触发，但由于图像已经在缓存中，因此当src属性时它会立即触发已经确定了。

这里的关键是这个词。在jQuery到达代码的下一位之前，load事件被触发并完成...这是您指定要调用load事件的函数的地方。 load()函数是在事件load已经发生后定义的。

因此，此处的解决方案是更改jQuery代码的顺序，以便在指定src属性之前定义load事件函数。这是相当微不足道的;它只需要稍微重新安排你现有的代码，如下所示：

var i = $('<img />').load(function() {
    ....
}).attr('src',this.href);

希望这能为你解决问题。

另一种解决方案是避免每次运行click事件时重新创建新的<img>元素。如果您每次都重复使用一个<img>元素，那么在src设置时，负载甚至已经存在，因此上述问题不会发生;即使事件立即触发，也没关系，因为事件处理函数已经存在。

此解决方案还可以为您提供较小的性能优势，而无需重复创建<img>元素。

当然，缺点是它会比上面的其他解决方案更大的代码更改。但这不会是一项大量的工作，所以也许你应该试一试。

无论你采用哪种解决方案，我希望有所帮助。

jQuery图像交换显示 - IE8错误？

1 个答案: