如何从可中止的AJAX请求返回二进制图像数据并将结果设置为HTML /
发布时间:2020-12-16 02:52:08 所属栏目:百科 来源:网络整理
导读:我正在编写一个Web应用程序,它涉及在网页上创建(和删除)大量图像的连续循环.每个图像由服务器动态生成. var img = document.createElement("img");img.src = "http://mydomain.com/myImageServer?param=blah"; 在某些情况下,其中一些图像在完成下载之前比它
我正在编写一个Web应用程序,它涉及在网页上创建(和删除)大量图像的连续循环.每个图像由服务器动态生成.
var img = document.createElement("img"); img.src = "http://mydomain.com/myImageServer?param=blah"; 在某些情况下,其中一些图像在完成下载之前比它们的实用性更长.那时,我从DOM中删除它们. 问题是浏览器即使在从DOM中删除后仍继续下载这些图像.这造成了瓶颈,因为我有新的图像等待下载,但他们必须等待旧的不需要的图像先完成下载. 我想中止那些不需要的图像下载.显而易见的解决方案似乎是通过AJAX请求二进制图像数据(因为AJAX请求可以中止),并在下载完成后设置img.src: // Code sample uses jQuery,but jQuery is not a necessity var img = document.createElement("img"); var xhr = $.ajax({ url: "http://mydomain.com/myImageServer?param=blah",context: img,success: ImageLoadedCallback }); function ImageLoadedCallback(data) { this.src = data; } function DoSomethingElse() { if (condition) xhr.abort(); } 但问题是这条线路没有按照我希望的方式工作: this.src = data; 我搜索过高低.有没有办法将图像源设置为通过AJAX发送的二进制图像数据? 解决方法
您必须将数据base64编码为
data: URI才能实现.但它在IE6-7中不起作用,并且在那里可以放入多少数据存在限制,特别是在IE8上.作为支持它的浏览器的优化可能值得做,但我不会依赖它.
另一种可能的方法是使用XMLHttpRequest预加载图像,然后只丢弃响应并将新图像的src设置为指向同一地址.应该从浏览器的缓存中加载图像.但是,在您动态生成图像的情况下,您需要注意缓存标头以确保响应是可缓存的. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |