Aborting (HTML) Image Downloads

Question

I have a variety of image sets that I'm displaying on a web page (say 50 images per set). A user may select a set to display from a list, which is loaded via a jQuery ajax call to remove the old img tags and add the new ones.

What I'm seeing is that all of the requests for the first batch of stale images still get pulled from the server, thereby delaying the load of new images and killing the UX. So my question is: is it possible to purge the requests from the browser for the first set of img's that no longer exist in the DOM? Is this not automatic?

Here is a sample jQuery snippet of the process:

updateImages = function(imageSetId) {
    // clear existing IMG set
    $("#imagesDiv").empty();

    $.post(
        "/GetImagesInSet",
        { imageSetId: imageSetId },
        function(data) {
            // add in new IMG set
            $("#imagesDiv").html(data);
        },
        "html"
    );
};

My expectation was that the call to $().empty() would prevent all the pending images that live in it to be removed from the request queue. I'll take alternative suggestions if this is a poor design!

Answer 1

Worth a try:

$("img","#imagesDiv").attr("src",'');
$("#imagesDiv").empty();

I'm not sure if you can remove pending requests from the queue, but that would certainly stop any new ones from being generated.

Answer 2

I've found a better alternative, which is to use a lazy loading technique that only downloads the visible images instead of all images (i.e. those scrolled out of the viewport). Bing.com's image search feature is a really nice example of this.

Here is a jQuery plugin that provides similar functionality: Lazy Load

Looking at the source it appears to load the image whenever the element's logical position is greater than that of the bottom of the logical view. The downside of this is that all images are loaded when scrolling down even when the image is never actually inside the viewport. For example, if you quickly scroll to the bottom of the page, the set of images above the bottom frame's view are loaded, even though they weren't really needed.

Bing's implementation is more robust and only loads images if they are truly visible. I'll have to test this plugin to make sure, but the source is simple enough and likely 'fixable' if the need arises.