Can I check whether an image has already been loaded earlier using Javascript or jQuery?

Question

Consider the following image appended to the document :

<img id="someimage" src="http://www.someimage.jpg">

None of the following will work if the image has already been loaded by the time these functions are called :

document.getElementById('someimage').onload = function ()
{
  console.log('image just loaded');
};

nor

$("#someimage").load(function ()
{
  console.log('image just loaded');
});

Is there a way around that ? i.e. a function that will not wait for the image to load but will check whether the image has already been loaded earlier?

Thanks

Answer 1

Check the complete property of DOM node:

document.getElementById('someimage').complete;

BTW, this is how you should handle it:

$("#someimage").one('load', function ()
{
  console.log('image just loaded');
}).each(function(){
    if(this.complete) $(this).trigger('load');
});

Answer 2

YOu can use the src property for this.

var image = document.getElementById('someimage');
if(image != null){
    if(image.src  == "http://www.someimage.jpg"){
       console.log("your image is loaded");
   }
}