问题描述
我正在创建一个浏览大量图片的应用程序。此时，项目的这一部分已完成，它会对正确的图片进行排序，过滤和加载，甚至将它们拆分为单独的页面以加快加载速度。
I am creating an application which browses a large amount of pictures. At this point, that portion of the project is done and it sorts, filters, and loads the correct pictures, and even splits them into separate pages for faster loading.
这个效果很好，但每页加载25张图片仍需要8秒钟。我做了一些研究，我得出结论，使用异步jQuery Ajax请求最好尽可能快地加载它们。
This works great, but it still takes over 8 seconds to load the 25 pictures per page. I have done some research and I have concluded that using asynchronous jQuery Ajax requests would be the best to load them all at the same time as fast as possible.
这是我的到目前为止的代码：
Here is my code for this so far:
var imageArray = <?php if (!empty($images)) {echo '["' . implode('", "', $images) . '"]';} else {echo "false";} ?>;
console.log(imageArray);
console.log(imageArray.length);
for (i = 0; i < imageArray.length; i++) {
$.ajax({
type: 'GET',
url: imageArray[i],
dataType: 'image/jpg',
async: true,
success: function (data) {
$("#" + i).attr("src", data);
}
});
}
此代码的问题在于它不会加载任何空白色方形与灰色边框。当我修改代码并在Chrome中的控制台中运行时， data 最终会成为一串乱七八糟的字符，我认为这些字符是原始图像数据。
The problem with this code is that it doesn't load nothing but an empty white square with a grey border. When I modify the code and run it in console in Chrome, data ends up being a string of jumbled up characters which I presume are the raw image data.
我一直在寻找好几天，包括SO，我还没有找到能满足我需要的解决方案。相反，我找到了使用jQuery attr（）将url简单地放入图像源的解决方案，这不是我需要的。
I have been searching for several days now, including on SO, and I have yet to find a solution which does what I need. On the contrary, I have found solutions which simply put the url into the image source using jQuery attr() which isn't what I need.
如果有人能提供任何解决方案来修复此代码，甚至可能提供一种不同且更有效的方法来获取所有图像，我对任何事情持开放态度。
If anyone can provide any kind of solution to fix this code, or even perhaps a different and more efficient method of getting all the images, I am open to anything.
imageArray ：
imageArray: http://pastebin.com/03tvpNey
问候，
伊曼纽尔
Regards,Emanuel
推荐答案
如果你正在使用Base64图像数据（你提到的混乱字符串），你需要得到你的 img src ： / p>
If you're using Base64 image data (the string of jumbled characters you mentioned), you'll need to get your img src to be something like:
所以你的代码应该是：
var imageArray = <?php if (!empty($images)) {echo '["' . implode('", "', $images) . '"]';} else {echo "false";} ?>;
console.log(imageArray);
console.log(imageArray.length);
for (i = 0; i < imageArray.length; i++) {
$.ajax({
type: 'GET',
url: imageArray[i],
dataType: 'image/jpg',
async: true,
success: function (data) {
$("#" + i).attr("src", 'data:image/png;base64,'+data);
}
});
}
然而 ...我会非常如果通过AJAX加载图像并使用Base64内容比使用普通的< img src =path/> 方法更快，则会感到惊讶。
However... I'd be very surprised if loading the images over AJAX and using the Base64 content is any quicker than using a normal <img src="path"/> approach.
AJAX的意思是在加载DOM之后获取一些数据。所有现代浏览器已经异步获取图像。我怀疑你会看到任何性能上的提升。
The point of AJAX is to fetch some data after the DOM is loaded. All moderns browsers will already fetch images asynchronously. I doubt you'll see any performance gain whatsoever.
我建议更可能的问题是你的25张图片......我想这些图片显示为缩略图...仍然是大型高分辨率图片。您应该保存较小的缩略图版本，然后在用户点击缩略图时查看高分辨率图像以查看完整尺寸的图片。
I'd suggest the more likely problem is that your 25 images... which I suppose are displayed as thumbnails... are still large, hi-res images. You should save a smaller 'thumbnail' version, and then fetch the hi-res image when/if the user clicks on the thumbnail to view the full-size one.
注意元素ID 可以以数字开头（或者是）。这在HTML4中无效，但在HTML5中完全没问题。但是，你可能在使用CSS规则时遇到问题 - 所以你最好用字母前缀（即i1，i2，i3 ......）。
Note that an element ID can start with (or be) a number. This wasn't valid in HTML4, but is perfectly fine in HTML5. However, you might have trouble with CSS rules - so you'd be better off prefixing with a letter (i.e. i1,i2,i3...).
这篇关于通过jQuery Ajax加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！