Question

我正在开发一个高度依赖于预加载图像的Web应用程序，然后再将其显示给用户。但是，根据用户的操作，在有机会完成之前终止图像加载有时很重要，以免浪费带宽。是否有可能做到这一点？如果是这样，究竟是怎么回事？

Answer 1

我认为不可能停止已经要求预装的图像。

在任何情况下，即使您在请求图像后尝试终止连接，即使客户端不接受它，服务器很可能也会完成数据传输（这意味着带宽仍然是浪费）。

您可以做的最好的事情是使用javascript一次预加载一个图像。这样，如果要停止加载图像，即使当前加载的图像无法停止，也可以停止预加载其余图像。

如果使用jQuery，可以尝试中止AJAX请求。

Abort Ajax requests using jQuery

使用jQuery.ajax（）函数预加载图像。 XMLHttpRequest对象有一个可以调用的abort（）方法。

然而，这并没有真正记录在案。 ajax（）函数不是为加载图像而设计的。从这个函数得到的图像将是奇怪的二进制文件，它是不可用的。（因为支持无图像格式，它会将其解释为文本）

但是，假设浏览器正在执行它应该执行的操作，则可以缓存图像。如果它被缓存，那么它将被预先加载，你可以引用相同的URL来使用它。

缓存受到服务器返回的任何标头的影响很大，因为在过期缓存之前，映像的有效期为多久。

Answer 2

是的，您可以使用HTTP流和特殊的AJAX方法来实现这一目标。

将服务器上的每个图像编码为base64字符串。注意：这会使有效负载大小增加约33％！对于PHP，请查看base64_encode函数

将base64编码的字符串拆分为多个 n 字节大小的块。每次打印每个块并刷新输出缓冲区。在php.net上的flush的评论部分中有一些很好的提示

根据您实现AJAX调用的方式，您可以中止XMLHttpRequest，强制浏览器关闭连接。以下是有关持久性检查方法的更多信息 http://ajaxpatterns.org/HTTP_Streaming#Streaming_Wiki_Demo

当ajax调用完成并且所有数据都已下载后，您只需使用数据网址在浏览器中创建图像：data:image/png;base64,ENCODED_DATA

您可能还想查看此http://ajaxpatterns.org/archive/HTTP_Streaming.php

Answer 3

我在Javascript: Cancel/Stop Image Requests找到了一个可接受的（或多或少）解决方案来解决我的问题并将其应用于此：

var img = new Image();
img.src = "IMG_0111.JPG";
var timer = setTimeout(function(){
        window.stop();
        document.execCommand("Stop", false);                                            
    },50);

这实现了我想要的结果，虽然我担心它也会结束所有其他HTTP请求。

在检索数据时是否可以停止图像加载请求？

3 个答案: