Question

好的，所以我正在开发一个小照片库，它将使用AJAX加载一组图像。基本上它会加载一个'loading.gif'占位符图像，发出一个AJAX请求来生成缩略图。 PHP页面生成缩略图并发送图像已生成的确认信息及其路径。然后我的onSuccess应该用实际的缩略图替换loading.gif。

问题：这一切都很好，除非在完成所有未完成的请求之后才开始放入缩略图。因此，不是让图像分开1或2秒，而是在具有20个缩略图的页面上生成我等待20秒然后在AJAX请求进行时，然后开始显示缩略图，即使有些已经准备好了一段时间。

以下是我的相关代码：

function getImageList() {
//Get an XML list of all the images to be displayed.
$.ajax({
 url:"gallery.php",
 type: "POST",
 data:{mode: "getImageList"},   
 success: function(responseText){  
  $(responseText).find('galImg').each(function(){ 

   //create the image divs and images, set properties and get values.
   var imageBox = document.createElement('div');
   var imageElement = document.createElement('img');
   imageBox.setAttribute('class','imageBox');
   imgThumbPath = $(this).find('img_thumb').text();
   imgThumbReady = $(this).find('img_thumb_ready').text();
   imgPath = $(this).find('img_path').text();
   imageElement.setAttribute('id',imgPath);
   imageBox.appendChild(imageElement);
   $('#galleryContainer').append(imageBox);  

   //now load the src of the image
   if (imgThumbReady=='no') {
    imageElement.setAttribute('src',loadingImage);
    $.ajax( {
     url: "gallery.php", 
     type: "POST",
     data: {mode: "generateThumbnail",imgPath:imgPath},   
     success: function(response){  
      if ($(response).find('message').text() == 'Sucess') {
        imageElement.setAttribute('src',$(response).find('galImg').find('img_thumb').text());
       } else {
        alert('Problem Loading Image - '+$(response).find('message').text());
       }
      },
     datatype: "html"
     } );
   } else {
    imageElement.setAttribute('src',imgThumbPath);
   }
  }); 
 },  
 datatype:"html"  
});  

}

Answer 1

我理解你的代码的方式，你正在制作一个ajax请求，一次生成你所有的缩略图。你想要做的可能是做一些循环来进行AJAX调用，逐个生成你的图像。为避免出现有限的连接问题，您应该使用ajax请求的回调函数来启动下一个请求。

所以你的代码逻辑会更像这样：

function loadImage(imagePath){
  $.ajax( {
    url: "gallery.php",
    type: "POST",
    data: {mode: "generateThumbnail",imgPath:imgPath},
    success: function(response){
      // Your code to display this new thumnail goes here
      imagePath(nextImage);
    }
};

此代码未经测试且不完整，但我认为应该足以指出正确的方向。我认为这是获得你想要的效果的最简单/最安全的方法。让我知道它是否有帮助！

在完成所有请求之前，多个AJAX请求不会调用onSuccess

1 个答案: