Javascript：取消/停止图像请求答案

【问题标题】：Javascript: Cancel/Stop Image RequestsJavascript：取消/停止图像请求
【发布时间】：2010-10-30 03:16:57
【问题描述】：

我有一个大量使用 Ajax 的网站。有时我需要在页面上为用户加载大图像文件。我的问题是，当下载这些大图像文件时，如果用户离开显示图像的页面，有没有办法阻止它们？谢谢。

【问题讨论】：

您是否注意到当您离开页面时浏览器没有取消下载？我同意它应该。然而，我也可以很容易地想象不同的浏览器可能有不同的行为。不幸的是。
嗯，这是一个 ajax 应用程序，所以我从不离开页面，但是，我尝试“离开”页面，令我惊讶的是，图像并没有停止下载。哇。没想到。我正在使用 FF 3.0.10 / IE8 和 Fiddler 来查看流量。

【解决方案1】：

我遇到了完全相同的问题，当用户通过 (ajax) 搜索结果快速“分页”时，浏览器仍在尝试下载每个页面的个人资料图片，而不仅仅是当前页面。这段代码对我有用，在运行新搜索之前调用了分页事件：

//cancel image downloads
if(window.stop !== undefined)
{
     window.stop();
}
else if(document.execCommand !== undefined)
{
     document.execCommand("Stop", false);
}

基本上就像点击浏览器上的“停止”按钮。

在 IE、FireFox、Chrome、Opera 和 Safari 中测试

【讨论】：

非常感谢 MyWhirledView。这几天我一直在努力解决这个问题。
这确实在 Safari 中工作...查看类似问题并在此处修复：stackoverflow.com/questions/3146200/…
有没有办法将此限制为一种文件类型？
@greatwitenorth 很遗憾，您无法精确控制它的应用方式。

【解决方案2】：

像这样。

$(img).attr('src','');

【讨论】：

【解决方案3】：

假设您使用 ajax 加载图像，您可以简单地在 window.onunload 事件中中止请求。为您正在使用的 XMLHttpRequest 对象声明一个全局变量。

var xhr;
//if using the XMLHttpRequest object directly
//you may already be doing something like this
function getImage(...){
  xhr = new XMLHttpRequest();
  xhr.open(....);
}

如果使用 jQuery，您可以将调用 $.ajax() 或 $.get 的返回值分配给 xhr 变量。

xhr = $.ajax(.....);

处理 window.onunload 并中止请求。

window.onunload = function(){
  xhr.abort();
}

【讨论】：

我没有使用 ajax 来加载图像。我认为设置 src = '' 可以解决问题，但事实并非如此。我真正要找的是 document.getElementById('image').stopLoading(); :)

【解决方案4】：

将 SRC 标记重新分配给不同的图像在 IE7 中不起作用，它会继续尝试下载第一个图像。

设置如下：

我创建了一个 JPEG 类型的 HTTP 处理程序。它包含永远不会完成执行的代码。所以 someImage.src=myhandler.ashx 将永远坐在那里加载，直到超时。

在此过程中，按下另一个按钮，将图像重新分配给一个小图像文件： someImage.src=small.jpg

即使我们重新分配了 src，对 myhandler.ashx 的请求也没有结束。

此外，如果您实际删除节点 someImage.parentNode.removeChild(someImage) 仍会继续尝试下载 myhandler.ashx

使用 IE7 测试并使用 HTTP Watch Pro 进行监控。

【讨论】：

我有一部分页面希望停止所有图像加载。我发现如果我转到父节点并将 innerHTML 设置为“”，它会很好地中止所有请求。这仅适用于 IE，Safari 和 Firefox 似乎无论如何都会继续加载图像（由于其他原因，以编程方式单击停止按钮不适合我）

【解决方案5】：

糟糕的解决方案是简单地将图像标签的 SRC 属性设置为空字符串，或者将其指向一个小部件。

编辑

看到您的评论，很惊讶它无法将 SRC 属性更改为空...尝试使用空白.gif 或其他东西。

如果这不起作用，您可能会受到浏览器架构的限制，这意味着您是 S.O.L.

【讨论】：