jQuery ajax请求和图像加载 [英] jQuery ajax request and images loading

问题描述

我有以下ajax调用:

I have following ajax call:

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

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

响应如下:

<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调用结束.所以 是否可以在此处使用加载功能并在显示加载文本的同时 并非所有图像都已加载?

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 ?

将为您提供帮助.

推荐答案

您可以将加载事件附加到图像上，看看这是否对您有用:

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

这篇关于jQuery ajax请求和图像加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！