通过JavaScript或jQuery停止在hashchange事件上加载图像 [英] Stop loading of images on a hashchange event via JavaScript or jQuery

问题描述

我正在使用 jQuery BBQ：Back Button&查询库插件，用于创建在单击链接时提取动态内容的页面。单击链接时，哈希值会更改，并且会引入新内容（因此，单击href的默认操作将被禁用。）

I am using the jQuery BBQ: Back Button & Query Library plugin to create a page that pulls in dynamic content when a link is clicked. When the link is clicked the hash is changed and new content is pulled in (the 'default' action of clicking a href is therefore disabled.)

该部分工作正常，但是有问题。

That part works just fine, but there is a problem.

假设主页页面中有一些DIV图像和一个链接列表......

Say the "home" page has a DIV a number of images in it and a list of links ...

• Page One


• 第二页


• 第三页

图像可能需要一段时间才能加载，与此同时，用户通常不会等待他们完全加载并单击Page One链接。

The images may take a while to load, in the meantime the user will often not wait for them to load fully and click the "Page One" link.

这清除了内容主页页面和页面一内容中的加载。这很好。

This clears out the contents of the "home" page and loads in "Page One" content. That works fine.

问题是即使用户已从主页页面移开，主页页面中的图像仍会在浏览器中加载。 / strong>

The problem is the images from the "home" page are still loading in the browser even though the user has moved on from the "home" page.

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

I know this is happening becuase the page hasn't actually changed and I'm using the BBQ Plugin's hashchange hack but I want to know if there is a way in JavaScript to tell all the images currently loading to stop on a hashchange event?

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

    //code to stop images from loading

    // now load in new HTML content

});

推荐答案

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

I tested this solution in WebKit (Chrome/Safari), Firefox and IE and it seems to work.

我使用了一个对大多数浏览器使用 window.stop（）; 的函数，以及IE的如果浏览器不支持window.stop（）

I used a function that uses window.stop(); for most browsers, and IE's own way of doing it if the browser doesn't support window.stop()

在此处查看更多内容： https://developer.mozilla.org/en/DOM/window.stop

See more here: https://developer.mozilla.org/en/DOM/window.stop

因此，对于支持它的浏览器（Firefox，WebKit），请使用：

So, for browsers that support it (Firefox, WebKit) use:

window.stop();

对于IE使用：

document.execCommand("Stop", false);

但要小心......

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

This is basically like pressing the "stop" button in the browser so everything currently being downloaded will stop, not just images (like I wanted.)

所以，里面......

So, inside ...

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

});

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

Here is the function I used ...

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

这篇关于通过JavaScript或jQuery停止在hashchange事件上加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！