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:
- Mouseover event on a thumbnail triggers a larger preview image to load.
- 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 wo开发者_运维知识库rk. I wouldn't put it beyond a browser to refuse to load an image that hasn't been placed in document
.
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");
精彩评论