Question

我有一个jquery bug，我一直在寻找几个小时，我无法弄清楚出了什么问题...... 我有这段代码：

     $(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的源...但有时当新图像太重时，fadeIn会在之前的src上执行!!所以我们先在前一张图像上看到fadeIn，然后右边的图片没有fadeIn ....

我错过了什么吗？

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()处理程序，每次更改图像时，它都会排队另一个{{1} ，以及下一个缓存组件也不会立即触发它两次。在更改图像源之前设置fadeIn处理程序非常重要，因为缓存的图像会在处理程序附加之前立即加载。

最后一段，.each()调用循环遍历图像以查看它是否为load，如果已经是从缓存加载的情况，并非所有浏览器都会触发complete这个事件...所以我们手动解雇它。之前的.one()来电阻止了这两次做任何事情。

Answer 2

fadeIn似乎是在前一个源上执行的，因为它实际上是在包裹图像的div上调用的。当您淡入div时，前一个图像仍然可以在其中显示，并且在新图像开始加载之前将保持可见。一旦确定图像已完成加载，请尝试淡入div：

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

请参阅load事件，并注意图片的.complete属性。

Answer 3

非常感谢你们两位，它完美无缺！你的回答尼克对于初学者来说有点复杂，但是我知道每次加载时fadeIn都是有趣的，以便进行优化和手动加载，以防某些浏览器在缓存时不会引发加载事件。浏览器缓存是我将来会考虑的更多内容; 所以现在一切都很好，只是改变了：

 if(this.complete)...

到

if($(this).complete) ...

因为仅此一点未知...... 反正谢谢你！这么多要学习......

在src改变之后jQuery fadeIn但是在之前的src上fadeIn无论如何！

3 个答案: