Question

Good Morning at all,

I’ve a problem with asyncronus ajax loading….

I’ve Done a dinamic gallery and i want to load the images after that the page has been loaded.

But when i try to fade in the images and fade out the spinner the only one that seems to gone perfectly is the last element.. Why?

What i could do? Thanks!

js File

$('.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 File

<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

My guess is that your .each() function finishes the loop faster than the .load()‘s callback functions run.

because of this, by the time the .load() function runs, the loop is finished and MyHolder and MyLoader equal to the last time you defined them (in the last .each() run).

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();}); 
   });
}

This way, once you run load_img, your two variables are saved in a different scope, and will not overwrite themselves on your next .each() iteration.