jQuery淡入/淡出图像在单击时跳转，同时加载新图像 [英] JQuery fadeIn/fadeOut image on click jumps while loading new image

问题描述

有一个图库，其中的图片很大，侧面带有缩略图.单击缩略图，大图像淡出，新图像淡入(从链接的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/

---

有什么办法解决这个问题吗?

解决方案

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

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

这使用 load 处理程序api.jquery.com/one/"rel =" nofollow> .one() 表示不附加多个事件处理程序(每次添加一个)，并且在图像加载后会逐渐消失...请确保设置绑定load处理程序的src 之后，以便将其附加并准备就绪.即使从缓存中获取了图像，也可以使用.

---

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

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

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

There's a gallery with a large image with thumbnails on the side. Click the thumbnail, the large image fades out, new one fades in (src getting called from the rel attribute of the link).

Problem: The old image fades out, re-appears, then jumps to the new image... I'm guessing the new image hasn't loaded yet, since it only happens the first time the image is loaded.

---

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

Live Site: http://marilynmcaleer.com/

---

Any idea how to fix this?

解决方案

Use the load event so the fade starts once the image is loaded, like this:

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

This binds the load handler using .one() as to not attach multiple event handlers (adding one every time), and will fade in once the image loads...make sure to set the src after binding the load handler so it's attached and ready to go. Even if the image is fetched from cache, this will work.

---

Alternatively, a bit better solution if possible is to bind that handler just once, like this:

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

Then every time it loads, it'll fade in again, the .stop() is to handle many clicks in a row, queuing up animations.

这篇关于jQuery淡入/淡出图像在单击时跳转，同时加载新图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！