Question

My train of thought was that a browser wouldn’t attempt to load a source until it was attached to the DOM, but when I use jQuery to create an image tag, it attempts to load the image source before I attach it. When creating the image tag, does jQuery temporarily attach the element?

In this example, the invalid URL causes a error log in the console, even with the append command commented out (view in jsFiddle).

    ​$(document).ready(function() {
    var $img = $("<img>", {
        height:"100px"
        ,width:"100px"
        ,src: "http://content.com/bad.url.jpg"
    });
    //$img.appendTo($("#container"));
});​

Answer 1

Images start loading image files (either live or from cache) once their src is set, whether or not they are attached to anything in the DOM. See: https://developer.mozilla.org/en/Canvas_tutorial/Using_images