1

I have seen some code to check if a background image on a div is loaded. What they are doing is adding a img tag to memory but storing it in a variable and using that to see if the image is loaded with the load event. My question is does the $img tag stay in memory and how would I be able to remove that tag when the load event has been called. 

  var $div = $('div'),
  bg = $div.css('background-image');
  if (bg) {
    var src = bg.replace(/(^url\()|(\)$|[\"\'])/g, ''),
      $img = $('<img>').attr('src', src).on('load', function() {
        // do something, maybe:
        $div.fadeIn();
      });
  }
});

I got this code above from this post

Community
  • 1
  • 1
Chapsterj
  • 6,483
  • 20
  • 70
  • 124

2 Answers2

2

You can remove elements with remove(). In your case the newly created <img> element is cached in the $img variable. So when you want to remove it you just do:

$img.remove();

To release the variable from memory you can use:

delete $img;

Although that isn't really necessary if the variable scope is not global as the javascript garbage collector will take care of that for you.

Also load() is deprecated and unreliable across browsers, so using it is discouraged. From jQuery docs:

Caveats of the load event when used with images

A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

• It doesn't work consistently nor reliably cross-browser
• It doesn't fire correctly in WebKit if the image src is set to the same src as before
• It doesn't correctly bubble up the DOM tree
• Can cease to fire for images that already live in the browser's cache

One alternative to load is this plugin.

Bogdan
  • 43,166
  • 12
  • 128
  • 129
  • Thanks Spider, so what should I use instead of load? I thought remove only worked for jquery elements when they were part of the dom meaning appended then use remove. I didn't know you could use it for object in memory. – Chapsterj Oct 15 '12 at 22:30
  • 1
    My mistake, you are correct about that. I missed the fact that you were not injecting the new element into the DOM. One alternative to `load` is [this plugin](https://gist.github.com/797120/7176db676f1e0e20d7c23933f9fc655c2f120c58) which takes care of the browser cache issues, but I'm not sure there's a 100% reliable cross-browser solution for this. As for releasing the variable allocated memory you can use `delete $img;`. – Bogdan Oct 15 '12 at 22:50
0

Leave it on Garbage Collector, otherwise

Just set the $img variable null, like

$img=null;

Actually $img.remove(); won't do that as mentioned in the comment by someone and also you don't have to worry about it because javascript Garbage Collector will do it for you and delete will work only if you declare the variable without var keyword. In this case of $img=null just makes the variable an empty null object.

Example using null and Example using .remove().

The Alpha
  • 143,660
  • 29
  • 287
  • 307
  • It looks like you are wrong. If you run [this](http://jsfiddle.net/qe4nx/9/) and [this](http://jsfiddle.net/qe4nx/10/) during 1 hour, the memory consumption is stable on the first one and is increasing on the second one. – benweet Aug 13 '13 at 12:01
  • @benweet, So, can you exactly tell on what i'm wrong, which argument ? – The Alpha Aug 13 '13 at 12:14
  • The test I've set up shows that you have to worry about `$img.remove();`. – benweet Aug 13 '13 at 12:18
  • @benweet, SO, you are telling that garbage collection won't clean the mess, right ? – The Alpha Aug 13 '13 at 12:25
  • The test has been running for 2 hours now. The first window takes between 80MB and 90MB. The second window is taking 173MB now and is going bigger. I'm not 100% sure it won't be garbage collected but I have some serious doubts. – benweet Aug 13 '13 at 12:44
  • @benweet, So, let me know when you become doubtless so I can change/delete my answer and can think about it differently and need to learn from the beginning. – The Alpha Aug 13 '13 at 12:49
  • After a few hours, the first window takes 88MB and the second 270MB. So I can tell that Chrome 28.0.1500.95 on OSX 10.8.4 doesn't collect elements created with `$('')`. – benweet Aug 13 '13 at 14:48