我正在创建一个浏览大量图片的应用程序。至此,项目的那部分完成了,它对正确的图片进行了排序,过滤和加载,甚至将它们拆分为单独的页面以加快加载速度。
效果很好,但每页加载25张图片仍需要8秒钟以上。我已经进行了一些研究,得出的结论是,使用异步jQuery Ajax请求是最好的方式,以便尽可能快地同时加载所有请求。
到目前为止,这是我的代码:
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最终会得到一串混乱的字符,我认为这是原始图像数据。
data
我已经搜索了好几天,包括SO,但是我还没有找到可以满足我需要的解决方案。相反,我发现了一些解决方案,它们只是使用jQuery将URL放入图像源中attr(),而这并不是我所需要的。
attr()
如果任何人都可以提供任何解决方案来修复此代码,或者甚至可以采用其他更有效的方法来获取所有图像,那么我将敞开心open。
imageArray : http : //pastebin.com/03tvpNey
问候,伊曼纽尔
如果您使用的是Base64图像数据(您提到的混杂字符的字符串),则需要使自己img src像这样:
img src
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
因此,您的代码应为:
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"/>方法快得多,我会感到非常惊讶。
<img src="path"/>
AJAX的重点是在加载DOM后获取一些数据。所有现代浏览器 已经可以 异步获取图像。我怀疑您是否会看到任何性能提升。
我建议更可能的问题是您的25张图像…我想是作为缩略图显示的…仍然是高分辨率的高分辨率图像。您应该保存较小的“缩略图”版本,然后/如果用户单击缩略图以查看完整尺寸的缩略图,则获取高分辨率图像。
请注意 ,元素ID 可以 以数字开头(或为数字)。这在HTML4中无效,但在HTML5中完全可以。但是,您可能会遇到CSS规则的麻烦- 因此最好在字母前加上前缀(例如i1,i2,i3 …)。