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

Posted 2023-04-13

【中文标题】通过 JavaScript 或 jQuery 停止在 hashchange 事件上加载图像

【英文标题】：Stop loading of images on a hashchange event via JavaScript or jQuery

【发布时间】：2011-03-09 22:33:48

【问题描述】：

我正在使用jQuery BBQ: Back Button & Query Library 插件创建一个页面，该页面在单击链接时会引入动态内容。当点击链接时，哈希值会发生变化，新内容会被拉入（因此，点击 href 的“默认”操作被禁用。）

这部分工作得很好，但是有一个问题。

我的问题示例

---

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

第一页 第二页 第三页

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

这会清除“主页”页面的内容并加载“第一页”内容。这很好用。

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

我知道发生这种情况是因为页面实际上并没有改变，而且我正在使用 BBQ 插件的 hashchange hack，但我想知道 javascript 中是否有办法告诉当前加载到的所有图像 停止 hashchange 事件？

??示例代码就像...

---

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

    //code to stop images from loading

    // now load in new html content

);

【问题讨论】：

另外，我不在乎服务器是否仍在处理“请求”......我只是希望客户端停止寻找答案/下载图像文件。

Javascript: Cancel/Stop Image Requests的可能重复

我不相信这是重复的。虽然解决方案是一样的，但问题是不同的。陈述的问题是关于 hashchange ......不是特别是 AJAX。这是一个单独的问题，具有相似的响应而不是重复的问题。

【参考方案1】：

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

我对大多数浏览器使用了一个使用 window.stop(); 的函数，如果浏览器不支持 window.stop()

在此处查看更多信息：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);
       

【参考方案2】：

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

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

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

【讨论】：

谢谢。这可能是不可能的......而且我几乎很高兴知道这是不可能的，因为我无法弄清楚。 :) 当我触发一个新的 hashchange 时，我已经清除了 DIV 的全部内容，所以整个 IMG 标签都会消失......但我可能会尝试先清除 IMG 的 SRC，然后清除 DIV 只是为了看看会发生什么。