Javascript/jQuery HasLoaded or equivalent?

Question

I know in jquery it is possible to call the javascript/jquery onload()/load() functions on, for example an image (<img>).

However, if in jquery if i use .html(htmlString) to insert an image after the dom has loaded, how can i add a listener to handle the images onload event? Is there a property I can check to see various images and if they have loaded?

Answer 1

After appending your html, you can bind the load event to the contained images:

$("#foo").html(htmlString).find("img").one("load", function() {
    ...
}).each(function() {

    // image has been cached, so load event won't fire unless we explicitly call it
    if(this.complete) $(this).trigger("load");
});

Answer 2

Check the complete property of the image(s)