Jquery Remove Image

Question

My overall problem is to lazy load images. I've gotten to the point where I'm loading the images only when they are on screen. I need to remove the images that are not on screen.

I thought

$(image).removeAttr("src")

would do it and it rightly removes src, but it does not clear the image from the screen, nor does it replace it with what is in alt.

How do I make it remove the image? Note, I do not want to remove the img tag (I need it for later), just clear the image from the screen.

Other code that may be relevant(although why I don't know)-

updateCarImages:=>
    imagesOnScreen = $(@el).find(".carImageClass:onScreen")
    imagesOffScreen = _.without(cachedImagesOnScreen,imagesOnScreen)
    for image in imagesOnScreen
      imgSrc = $(image).attr("src")
      if (!imgSrc)
        id = $(image).data("tooltip-id")
        console.log(id)
        result = resultsStore.get(id+"")
        console.log(result)
        $(image).attr("src", result.get("carImageUrl"))
    console.log(imagesOffScreen)
    for image in imagesOffScreen
      $(image).removeAttr("src")

Answer 1

If you are trying to clear memory (which as I see it would be the only reason to remove images that are not visible) you are up for a ride.

There is no bullet proof way to force a browser to do that. The only way the browser will call the garbage collector is to reach a certain memory limit, and then hint the collector what it should take first.

Moving nodes to a bin and empty it is considered a good way:

var $trash = $('<div>').hide().appendTo('body');

var waste = function(node) {
    $trash.append(node).html('');
}

You might get lucky with replacing the source with an empty GIF:

$(image).attr('src','data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAA‌​LAAAAAABAAEAAAICRAEAOw%3D%3D');

This will also keep the node in place and image width/height.

But I highly doubt that any of this will result in any performance gain in your case, the best thing is to not stress the browser with too much data at all.

iOS for iPad (especially version 4.x) is known for having a low memory limit and can easilly crash if you leave too many IMG nodes around.

Answer 2

If your issue is performance, then you can use a pre-existing lazy load jQuery plugin. There is no point re-inventing the wheel.

http://www.appelsiini.net/2012/lazyload-170

---

Alternatively if you don't wish to use this plugin you could store the src value in a data-* attribute and only attach it to src when you wish to display it.

When hiding:

$(image).data("src", $(image).attr("src"));
$(image).removeAttr("src");
$(image).hide();

When displaying:

$(image).attr("src", $(image).data("src"));
$(image).show();