好的，所以我正在开发一个小照片库，它将使用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”
});
}