0

祝大家早安，

我有异步 ajax 加载的问题....

我已经完成了一个动态画廊，我想在页面加载后加载图像。

但是当我尝试淡入图像并淡出微调器时，唯一似乎完美消失的是最后一个元素..为什么？

我能做什么？谢谢！

.js 文件

$('.Home-Image').each(function(index) {

MyHolder = $(this).children(".Home-Image-Holder");
MyLoader = $(this).children(".Home-Image-Loader");

IDIMG = $(MyHolder).attr("AjaxRel");


$(MyHolder).load('<?PHP echo($ABS); ?>/inl/components/AjaxImageHome.php?ABS=<?PHP echo $ABS; ?>&IDIMG='+IDIMG, function()
{
    MyLoader.fadeOut(250,0,function(){MyHolder.fadeIn();}); 
});

});

html文件

<div class="Home-Image">    
   <div class="Home-Image-Loader"></div>
   <div class="Home-Image-Holder" AjaxRel="1"></div>
</div>

<div class="Home-Image">    
   <div class="Home-Image-Loader"></div>
   <div class="Home-Image-Holder" AjaxRel="2"></div>
</div>

<div class="Home-Image">    
   <div class="Home-Image-Loader"></div>
   <div class="Home-Image-Holder" AjaxRel="3"></div>
</div>


<div class="Home-Image">    
   <div class="Home-Image-Loader"></div>
   <div class="Home-Image-Holder" AjaxRel="4"></div>
</div>
4

1 回答 1

0

我的猜测是，您的.each()函数完成循环的速度比.load()' 的回调函数运行得更快。

正因为如此，当 .load() 函数运行时，循环结束并且 MyHolder 和 MyLoader 等于您最后一次定义它们的时间（在最后一次 .each() 运行中）。

解决方案：

$('.Home-Image').each(function(index) {

MyHolder = $(this).children(".Home-Image-Holder");
MyLoader = $(this).children(".Home-Image-Loader");
load_img(MyHolder,MyLoader);


function load_img(MyHolder,MyLoader){
   IDIMG = $(MyHolder).attr("AjaxRel");
   $(MyHolder).load('<?PHP echo($ABS); ?>/inl/components/AjaxImageHome.php?ABS=<?PHP echo    $ABS; ?>&IDIMG='+IDIMG, function()
   {
       MyLoader.fadeOut(250,0,function(){MyHolder.fadeIn();}); 
   });
}

这样，一旦您运行 load_img，您的两个变量就会保存在不同的范围内，并且不会在您的下一次 .each() 迭代中覆盖它们自己。

于 2012-04-16T13:48:10.000 回答