jQuery在淡入淡出之后改变了，但是在之前的src淡入淡出！

我有一个jQuery的错误，我一直在寻找的时间，我想不出有什么错...... 我有这样的代码：jQuery在淡入淡出之后改变了，但是在之前的src淡入淡出！

 $(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>

它只是改变了我的img在一个名为pho的div中的源...但是有时当新图像太重时，fadeIn会在之前的src上执行！所以我们先在前一张图片上看到淡入淡出，然后右侧图片显示为淡入淡出。

我错过了什么吗？

PS：页面在这里http://www.marion-baglan.net/photos.htm#centre如果单击快，你可以看到它......当我试图把一些大的照片，这是非常明显的...

来源

2010-05-14 KitAndKat

你需要一个像卡里姆建议使用load事件，但在一个稍微不同的方式在所有的情况下工作，像这样：

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

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

最后一块时，.each()呼叫遍历图像，看它是否complete，如果是这样的情况下，已经有人从缓存中加载，而不是所有的浏览器触发load事件这个......所以我们是手动发射它。来自前面的.one()调用可以防止它做任何事情两次。

来源

2010-05-14 17:33:37

fadeIn似乎是上一执行因为它实际上是在包装图像的div上调用的。当淡入div时，之前的图像仍然可见，并且在新图像开始加载之前将保持可见状态。尝试在div衰落一旦你确定它在图像完成加载：

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

见load事件，并注意图像的.complete财产。

来源

2010-05-14 17:30:09 karim79

非常感谢你们俩，它完美的工作！您的回答Nick对于初学者来说有点复杂，但是我明白，每次加载优化时都会淡入一次并在手动加载，以防某些浏览器在缓存中发出加载事件时无法加载。浏览器缓存是我将来考虑的更多内容; 所以现在这一切都很好，只是改变了：

if(this.complete)...

到

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

，因为这本身是未知.. 没什么反正谢谢！这么多学习...

来源

2010-05-14 20:38:25 KitAndKat

jQuery在淡入淡出之后改变了，但是在之前的src淡入淡出！

回答

相关问题