Question

有一个带有大图像的画廊，侧面有缩略图。单击缩略图，大图像淡出，新图像淡入（从链接的rel属性调用src）。

问题：旧图像淡出，重新出现，然后跳转到新图像......我猜测新图像尚未加载，因为它只在第一次加载图像时发生。 / p>

HTML

<div id="image"><img src="http://marilynmcaleer.com/images/BeachRoad-title.jpg" width="480" height="383" /></div>
<div id="thumbnails">
    <div class="thumbnail-homes"><a href="#" rel="http://marilynmcaleer.com/images/BeachRoad-title.jpg" class="image"><img src="http://marilynmcaleer.com/thumbnails/homeportrait_thumbs/BeachHouse_thumb.jpg" width="136" height="90" alt="Beach House" /></a></div>
    <div class="thumbnail-nudes"><a href="#" rel="http://marilynmcaleer.com/images/ReducedFigure-title.jpg" class="image"><img src="http://marilynmcaleer.com/thumbnails/nude thumbs/reducedfigure_thumb.jpg" width="136" height="90" alt="Patience" /></a></div>

    <div class="thumbnail-murals"><a href="#" rel="http://marilynmcaleer.com/images/BabyElephant-title.jpg" class="image"><img src="http://marilynmcaleer.com/thumbnails/mural thumbs/babyelephant_thumb.jpg" width="136" height="90" alt="Baby Elephant" /></a></div>
    <div class="thumbnail-paintings"><a href="#" rel="http://marilynmcaleer.com/images/Charlevox-title.jpg" class="image"><img src="http://marilynmcaleer.com/thumbnails/homeportrait_thumbs/Charlevouix_thumb.jpg" width="136" height="90" alt="Boat Shed" /></a></div>
</div>
<div class="clear"></div>

JQuery的

    $(function() {
        $(".image").click(function() {                  // something with class "image" gets clicked and a function happens
            var image = $(this).attr("rel");                // variable (image) is defined to be the rel attribute of the link that was clicked
            $('#image img').hide();                             // hides the old big image
            $('#image img').attr('src', image);
            $('#image img').fadeIn();                       // animate to fade in 
        return false;
    });
});

直播网站：http://marilynmcaleer.com/

知道如何解决这个问题吗？

Answer 1

使用load事件，以便在加载图像后开始淡入淡出，如下所示：

$(function() {
  $(".image").click(function() {
    var image = $(this).attr("rel");
    $('#image img').hide().one('load', function() {
      $(this).fadeIn(); 
    }).attr('src', image);
    return false;
  });
});

这使用load绑定.one()处理程序，因为不附加多个事件处理程序（每次添加一个），并且一旦图像加载就会淡入...确保设置{{ 1}} 在绑定src处理程序之后，它已经附加并准备好了。即使从缓存中提取图像，也可以使用。

或者，如果可能的话，更好的解决方案是将该处理程序绑定一次，如下所示：

load

然后每次加载时，它都会再次淡入，.stop()会连续处理多次点击，排队动画。

Answer 2

我总是遇到嵌套元素没有返回正确的事件目标的问题，所以你可能想要使用直播事件：

    $(function () {
        var img = $('#image img');
        img.load(function(e) {
            img.fadeIn();
        });
        $(".thumbnails").live('click', function(e) {
            var rel = $(e.target).closest("a").attr("rel");
            img.stop().hide().attr('src', rel);
        });
    });

加载新图像时，点击跳转时JQuery淡入/淡出图像

2 个答案: