javascript - JQuery fadeIn after src changed 但无论如何 fadeIn 在前一个 src 上!

Question

我有一个 jquery 错误，我已经找了好几个小时了，我不知道出了什么问题......我有这段代码:

     $(document).ready(function(){

$('#ulPhotos a').click(function() {
    var newSrc= $(this).find('img').attr('src').split("/");
    bigPictureName = 'big'+newSrc[2];

    $('#pho').hide(); 
    $('#imageBig').attr("src", "images/photos/"+bigPictureName);
    $('#pho').fadeIn('slow');

    var alt = $(this).find('img').attr('alt'); 
    $('#legend').html(alt);
    }); 
    });

这是在 html 中:

<ul id="ulPhotos">
    <li><a href="#centre"><img src="images/photos/09.jpg" title="La Reine de la Nuit au Comedia" alt="<em>La Reine de la Nuit</em> au Comedia"/></a>
    <a href="#centre"><img src="images/photos/03.jpg" title="Manuelita, La Périchole à l&rsquo;Opéra Comique" alt="Manuelita, <em>La Périchole</em> à l&#8217;Opéra Comique" /></a></li>
    <li><a href="#centre" ><img src="images/photos/12.png" title="" alt="Marion Baglan Carnac Ré" /></a>

这是用于 bigImage 的:

</div>
<div id="pho"  a name="centre">
<p id="legend"> La Reine de la Nuit</p>
  <img src="images/photos/big09.jpg" alt="Marion Baglan" id="imageBig"/> 

</div>

它只是在名为 pho 的 div 中更改了我的 img 的源...但有时当新图像太重时，淡入会在以前的 src 上执行!所以我们首先在上一张图片上看到了淡入，然后，右边的图片出现了没有淡入....

我错过了什么吗？

ps:页面在这里http://www.marion-baglan.net/photos.htm#centre如果你快速点击你可以看到它......当我尝试放一些更大的照片时，它非常明显......

Answer 1

您需要像 karim 建议的那样使用 load 事件，但在所有情况下都以稍微不同的方式工作，如下所示:

$('#imageBig').one('load', function() {
    $('#pho').fadeIn('slow');
}).attr("src", "images/photos/"+bigPictureName).each(function() {
  if(this.complete) $(this).load();
});

您需要使用 .one() 附加 load 处理程序出于两个原因，所以我们不添加 .load()处理程序，每次更改图像时，它都会将另一个 fadeIn 排队，因此下一个缓存组件不会立即触发它两次。 在更改图像源之前设置加载处理程序很重要，因为缓存的图像将立即加载，可能在附加处理程序之前。

最后一 block ，.each()调用循环遍历图像以查看它是否 complete，如果是的话，它已经从缓存中加载，并且并非所有浏览器都为此触发 load 事件......所以我们正在手动发射它。 .one()之前的调用阻止了它做任何事情两次。