Have Geek Brain

Cancel (HTML) Upload images

I have many sets of images that I display on a web page (e.g. 50 images per set). The user can select a set to display from a list that is loaded with a jQuery ajax call to remove old img tags and add new ones.

What I see is that all requests for the first batch of legacy images are still being pulled from the server, thereby delaying the loading of new images and killing the UX. So my question is, is it possible to clear requests from the browser for the first set of img that no longer exists in the DOM? Is it not automatic?

Here's an example snippet of the jQuery 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 the $ (). empty () will prevent all pending images from being removed from the request queue. I'll take alternative suggestions if it's bad design!

0


a source to share


2 answers


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

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



Looking at the source, it loads the image whenever the boolean position of the element is greater than the bottom of the boolean view. The downside to this is that all images are loaded on scrolling down, even when the image is never inside the viewport. For example, if you quickly scroll to the bottom of the page, a bunch of images above the bottom view of the frame will load, even though they are not needed.

Bing's implementation is more robust and only downloads images if they are actually visible. I have to check this plugin to be sure, but the source is simple enough and probably "working" if the need arises.

+1


a source


Worth a try:

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


I'm not sure if you can remove pending requests from the queue, but that will definitely stop any new ones from being created.

+2


a source






More articles:


All Articles