通过 JavaScript 或 jQuery 停止在 hashchange 事件上加载图像

Question

我正在使用 jQuery BBQ：后退按钮和查询库插件，用于创建一个页面，在单击链接时提取动态内容。单击链接时，哈希值会发生更改，并且会引入新内容（因此单击 href 的“默认”操作被禁用。）

该部分工作正常，但存在问题。

我的问题的示例

---

假设“主页”页面有一个 DIV，其中有许多图像和一个链接列表...

• 第一页
• 第二
• 页第三页

图像可能需要一段时间才能加载，同时用户通常不会等待它们完全加载并单击“第一页”链接。

这将清除“主页”页面的内容并加载“第一页”内容。效果很好。

问题是，即使用户已从“主页”页面转移，“主页”页面中的图像仍在浏览器中加载。

我知道发生这种情况是因为该页面实际上并未加载已更改，我正在使用 BBQ 插件的 hashchange hack，但我想知道 JavaScript 中是否有一种方法可以告诉当前加载的所有图像停止 >hashchange 事件？

??示例代码就像...

---

$(window).bind('hashchange', function () {

    //code to stop images from loading

    // now load in new HTML content

});

Answer 1

我在 WebKit (Chrome/Safari)、Firefox 和 IE 中测试了这个解决方案，它似乎有效。

对于大多数浏览器，我使用了一个使用 window.stop(); 的函数，如果浏览器不支持 window.stop()，则使用 IE 自己的方式执行此操作。

请在此处查看更多信息：https://developer.mozilla.org/en/DOM/window.stop

所以，对于浏览器支持它（Firefox、WebKit）的使用：

window.stop();

对于 IE 使用：

document.execCommand("Stop", false);

但是要小心...

这基本上就像按浏览器中的“停止”按钮一样，因此当前正在下载的所有内容都会停止，而不仅仅是停止图像（就像我想要的那样。）

所以，在里面......

$(window).bind('hashchange', function () {

});

这是我使用的功能......

function stopDownloads() {
    if (window.stop !== undefined) {
        window.stop();
    }
    else if (document.execCommand !== undefined) {
        document.execCommand("Stop", false);
    }   
}

Answer 2

我相当确信这是不可能的（但很高兴被证明是错误的）。

原因是您网站中嵌入的图像会导致 HTTP GET 请求发送到您的服务器。发送该请求后，您的服务器将处理并响应该请求，该请求将由浏览器处理。

现在，如果可能的话，我猜它会涉及到遍历每个图像并清空其 src 属性（我认为这不会起作用，因为，我说，请求已经发送了）。或者调用一些（可能依赖于浏览器的）机制来停止图像加载。