Question

早上好，

我遇到了asyncronus ajax loading ....

我已经完成了一个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()的回调函数运行的速度快。

因此，当.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（）迭代中覆盖它们。

AJAX图库加载

1 个答案: