JavaScript：取消/停止图像请求

Question

我有一个网站，大量使用Ajax。偶尔需要在页面上为用户加载大型图像文件。我的问题是，当这些大型图像文件正在下载时，如果用户导航离开显示图像的页面，是否有一种方法可以停止它们？谢谢。

- frio80

---

你是否注意到当你离开一个页面时，浏览器没有取消下载？我同意它应该这样做。然而，我也可以很容易地想象不同的浏览器可能会有不同的行为。不幸的是。 - Bruce

好的，这是一个ajax应用程序，所以我从未离开过页面，但是我尝试“离开”页面，令我惊讶的是图像并没有停止下载。哇，没想到会这样。我正在使用FF 3.0.10 / IE8和Fiddler来监视流量。 - frio80

Answer 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中进行了测试。

- SavoryBytes

---

非常感谢MyWhirledView。我已经苦苦挣扎了好几天。 - Alex

这在Safari中是有效的……参见类似的问题和解决方案：https://dev59.com/Ek7Sa4cB1Zd3GeqP6MLK - Justin Jenkins

有没有一种方法可以将其限制为一个文件类型？ - greatwitenorth

很抱歉，@greatwitenorth，您无法对其应用进行细粒度控制。 - SavoryBytes

Answer 2

like this.

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

- bbokkun

Answer 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();
}

- ichiban

---

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

Answer 4

在IE7中，将SRC标签重新分配给另一张图片是无效的，它会继续尝试下载第一张图片。

以下是设置：

我创建了一个HTTP处理程序，它是JPEG类型。它包含永远不会完成执行的代码。因此，someImage.src=myhandler.ashx将永远停留在加载状态，直到超时。

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

即使我们已经重新分配了SRC，对myhandler.ashx的请求也不会结束。

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

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

- ericj

---

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

Answer 5

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

编辑

看到了你的评论，惊讶于将SRC属性更改为空时它不起作用...尝试使用blank.gif或其他东西。

如果这样仍然不行，那么可能受到浏览器架构的限制，也就是说你只能自认倒霉了。

- M. Ryan