Ok, so I'm working on a little photo gallery that will load a set of images using AJAX. Basically it will load a 'loading.gif' placeholder image, make an AJAX request to generate the thumbnail image. PHP page generates the thumbnail and sends a confirmation that the image has been generated and the path of it. My onSuccess should then replace the loading.gif with the actual thumbnail.
好的，所以我正在开发一个小照片库，它将使用AJAX加载一组图像。基本上它会加载一个'loading.gif'占位符图像，发出一个AJAX请求来生成缩略图。 PHP页面生成缩略图并发送图像已生成的确认信息及其路径。然后我的onSuccess应该用实际的缩略图替换loading.gif。
The problem: This all works just fine, except it won't start putting the thumbnail images in until after ALL the unfinished requests are done. So instead of having the images appear 1 or 2 seconds apart, on a page with 20 thumbnails to generate I wait 20 seconds then while the AJAX requests are going, then begins to display the thumbnails, even though some have been ready for a while.
问题：这一切都很好，除非在完成所有未完成的请求之后才开始放入缩略图。因此，不是让图像分开1或2秒，而是在具有20个缩略图的页面上生成我等待20秒然后在AJAX请求进行时，然后开始显示缩略图，即使有些已经准备好了一段时间。
Here is my relevant code:
这是我的相关代码：
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"
});
}
1 个解决方案
#1
1
The way I understand your code, you are making an ajax request to generate all of you thumbnails at once. What you want to do is probably to make some kind of loop to make an AJAX call to generate your images one by one. And to avoid having the limited connection issue, you should make use of the callback function of your ajax request to initiate the next request.
我理解你的代码的方式，你正在制作ajax请求，立即生成所有缩略图。你想要做的可能是做一些循环来进行AJAX调用以逐个生成你的图像。为避免出现有限的连接问题，您应该使用ajax请求的回调函数来启动下一个请求。
So your code logic will be more like this :
所以你的代码逻辑会更像这样：
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);
}
};
This code is untested and incomplete, but I think it should be enough to point you in the right direction. I think it's the easiest/safest way to get the effect that you wish for. Let me know if it helps!
此代码未经测试且不完整，但我认为应该足以指出您正确的方向。我认为这是获得你想要的效果的最简单/最安全的方法。如果有帮助请告诉我！
#1
1
The way I understand your code, you are making an ajax request to generate all of you thumbnails at once. What you want to do is probably to make some kind of loop to make an AJAX call to generate your images one by one. And to avoid having the limited connection issue, you should make use of the callback function of your ajax request to initiate the next request.
我理解你的代码的方式，你正在制作ajax请求，立即生成所有缩略图。你想要做的可能是做一些循环来进行AJAX调用以逐个生成你的图像。为避免出现有限的连接问题，您应该使用ajax请求的回调函数来启动下一个请求。
So your code logic will be more like this :
所以你的代码逻辑会更像这样：
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);
}
};
This code is untested and incomplete, but I think it should be enough to point you in the right direction. I think it's the easiest/safest way to get the effect that you wish for. Let me know if it helps!
此代码未经测试且不完整，但我认为应该足以指出您正确的方向。我认为这是获得你想要的效果的最简单/最安全的方法。如果有帮助请告诉我！