AJAX库加载

Question

早安可言，

我已经与阿贾克斯asyncronus加载....

我已经做了DINAMIC画廊，我想在页面加载后的图像的问题已被加载。

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

我能做什么？谢谢！

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> 

Answer 1

我的猜测是，你.each()函数完成了环比​​的回调函数运行速度更快。因此，在.load（）函数运行时，循环结束，MyHolder和MyLoader等于您最后一次定义它们时（在最后的.each（）运行中）。

SOLUTION：

$('.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，你的两个变量保存在不同的范围，不会覆盖自己对你的下一个。每次（）迭代。