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，你的兩個變量保存在不同的範圍，不會覆蓋自己對你的下一個。每次（）迭代。