Question

I have following ajax call:

$("#container").html("loading...");

$.ajax({
   url: "somedoc.php",
   type: "POST",
   dataType: "html",
   success: function(response){
      if(response != ''){   
        $("#container").html(response);
      }                 
   }
});

Response look like this:

<ul>
  <li><img src="big_size_image_1.jpg" alt="" /></li>
  <li><img src="big_size_image_2.jpg" alt="" /></li>
  <li><img src="big_size_image_3.jpg" alt="" /></li> 
</ul>

Ajax call finishes up before all images are downloaded to the user. So
is it possible to use load function here and show loading text while
not all images are loaded ?

Your help would be appreaciated.

Answer 1

You could attach a load event to the images, see if this works for you:

$.ajax({
   url: "somedoc.php",
   type: "POST",
   dataType: "html",
   success: function(response){
      if(response != ''){
        var $imgs = $("#container").html(response)
                       .find("img") //find the appended images
                       .hide(), //hide them
            imgAmount = $imgs.length, 
            imgCounter = 0;

        //Here you should show your loading text

        $imgs.on("load", function(){
          imgCounter++;
          if(imgCounter === imgAmount) {

            //Here you should hide your loading text

            $imgs.fadeIn(); //show the images when they're loaded
          }
        });
      }                 
   }
});