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

Jus*_*ins 5 javascript jquery fragment-identifier hashchange browser-state

我正在使用jQuery BBQ:后退按钮和查询库插件来创建一个页面,该页面在单击链接时会提取动态内容.单击链接时,将更改哈希并引入新内容(因此禁用单击href的"默认"操作.)

那部分工作正常,但有一个问题.

我的问题的例子


假设"主页"页面中有一些DIV,其中有一些链接列表......

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

图像可能需要一段时间才能加载,同时用户通常不会等待它们完全加载并单击"Page One"链接.

这将清除"主页"页面的内容并加载到"页面一"内容中.这很好.

问题是即使用户已经从"主页"页面移动,来自"主页"页面的图像仍然在浏览器中加载.

我知道这是发生的,因为页面实际上没有改变,我正在使用BBQ插件的hashchange hack但是我想知道是否有一种方法可以告诉JavaScript当前加载的所有图像停止hashchange事件上?

?? 示例代码就像......


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

    //code to stop images from loading

    // now load in new HTML content

});
Run Code Online (Sandbox Code Playgroud)

Jus*_*ins 8

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

我使用了一个使用window.stop()的函数; 对于大多数浏览器,以及IE自己的方式,如果浏览器不支持window.stop()

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

因此,对于支持它的浏览器(Firefox,WebKit),请使用:

window.stop();
Run Code Online (Sandbox Code Playgroud)

对于IE使用:

document.execCommand("Stop", false);
Run Code Online (Sandbox Code Playgroud)

不过要小心......

这基本上就像按下浏览器中的"停止"按钮,一切当前正在下载将停止,而不仅仅是图像(如我想要的.)

所以,里面......

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

});
Run Code Online (Sandbox Code Playgroud)

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

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