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")

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")

• javascript
• jquery

• Please explain the logics behind "remove images but keep the IMG tag". What is the point of hiding images that are not visible? – David Hellsing Commented Sep 6, 2012 at 9:02
• because I will load them again when they are on screen – praks5432 Commented Sep 6, 2012 at 9:05
• But... why? what are you trying to achieve? The image data will still be kept in memory, even if you "remove" them. – David Hellsing Commented Sep 6, 2012 at 9:07
• ohhh so If I've loaded them, and I have a 1000, there is no performance issue from keeping them? – praks5432 Commented Sep 6, 2012 at 9:09
• In my experience, image data is kept in memory until a memory limit is reached. Then the garbage collector comes around and removes excessive data. There are various tests and theories around what data it collects first, but it would probably be wise to move the IMG node to a bin and innerHTML('') it to prioritize them for the collector. Managing browser memory for 1000 images is not a simple thing, especially if you aim mobile browsers as well. – David Hellsing Commented Sep 6, 2012 at 9:15

7 Answers 7

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.

To hide the image:

$(image).hide();

This will set style="display:none;" on the image and make it not appear

To delete the image:

$(image).remove();

This will Physically remove it from the DOM so it no longer exists

Hybrid approach (leaves the image in the DOM and allows you to change it later)

//Remove the SRC and hide the image
$(image).removeAttr("src").hide();

//Then when you want to change to a new image
$(image).attr("src", "iamge.gif").show();

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();

You can simply hide the image. If you don't wat to go there , you can maybe create a 1px image and than :

$(image).attr('src', '1px.png');

If you want to hide the image, but keep it in place in terms of taking up its space and not affecting container's scrollbars, use visibility: hidden style:

$(image).css('visibility', 'hidden');

You can simply remove image from this code. I have tried it.

$('.img2').dblclick(function()
{
    $(".img2").removeAttr('src');
});

This following code shows how I was able to remove the image source

 var image_holder = $("#preview-image-holder");
 image_holder.empty();