Question

Is there a specification for how browsers handle image loading if the image tag is just one of those diembodied Javascript elements that haven’t been inserted into the document? An example:

$('<img src="/path/to/image.jpg" />')

Is there a specification that tells the image to load? I ask because I am interested in the following implementation:

1. Mouseover event on a thumbnail triggers a larger preview image to load.
2. The larger preview image loads and triggers a load event, at which point it is overlaid on top of the original mouseover element.

The implementation of (2) is not hard, but I want to be sure that I can rely on the load event across browsers. I have tried it in Firebug and the Chrome console and it seems to work fine, but I haven’t encountered a specification telling me that it will always work. I wouldn’t put it beyond a browser to refuse to load an image that hasn’t been placed in document.

Answer 1

The load event should fire consistently across modern browsers. You may have problems with out-dated browsers (pre-IE6). One thing I must recommend is that you assign a load event handler before setting the src. This ensures the event will fire…

$("<img />").load(function() {
  alert("Loaded!");
  $(this).css("border", "solid 2px black").appendTo("body");  
}).src("/path/to/image.jpg");