1

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

在 Firefox、Chrome、Opera 和 IE > 8 中一切正常。在 IE8 中，在第一次加载时，可以按顺序单击每个图像以生成相应的大图像，但在单击第七个缩略图或单击直接数字序列后会导致尽管href仍然正确，但未显示大图。注意：使用 jQuery 1.8.2 和 Modernizr 2.6.2。

除了 IE8 错误之外，我认为还有其他三个问题值得一提。1) 使用 .load() 会产生缓慢的加载时间，直到图像被缓存。我想我应该使用预加载器，但不确定如何使用此设置。2）而且由于大图像加载缓慢，绝对定位的照片信用有时会首先显示在错误的位置，直到img加载。理想情况下，jQuery 照片信用块将被链接到跟随图像加载代码以避免这种情况；我尝试使用匿名函数来做到这一点，但无法让它工作，所以 .delay() 是一个不可靠且不可靠的替代方案。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; }
4

1 回答 1

0

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

看起来您.load()的图像函数（AM_main.js 的第 57 行）仅在第一次加载图像时被调用。如果再次单击同一图像，load()则不会调用该函数。

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

这里的关键是立即这个词。该load事件在 jQuery 进入下一段代码之前被触发并完成......这是您指定希望load事件调用的函数的地方。该load()函数是在事件load已经发生之后定义的。

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

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

希望这应该为您解决问题。

<img>另一种解决方案是避免在每次运行单击事件时重新创建新元素。如果您有一个<img>每次都重复使用的元素，那么即使在设置 时，负载也总是已经到位src，因此不会发生上述问题；即使事件确实立即触发，那也很好，因为事件处理函数已经存在。

该解决方案还可以为您带来一点性能优势，因为您不必重复创建<img>元素。

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

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

于 2013-03-23T21:28:30.863 回答