jQuery IE7 on-the-fly images

Question

The simplified version of the problem I am seeing in IE7 can be demonstrated using FireBug Lite.

On a page loaded with jQuery, I open FireBug Lite (via bookmarket) and I enter the following:

image = $('<img src="http://example.com/boofar.jpg" border="12" 
                    width="95" height="95" title="Booya">')[0];

and the result echoed is:

<img title="Booya" contentEditable="inherit" start="fileopen" 
                    loop="1" src="http://example.com/boofar.jpg" border="12">

Where are the width and height attributes? Furthermore,

 image.width;

and

 image.attributes.width.value;

return 0 and "0".

Seen this with both jQuery 1.2.6 as well as 1.4.2. It does the right thing in IE8 and FF.

Any ideas where those attributes went? Very annoying....

Answer 1

You'll get better results using jQuery to create the image attributes directly:

var $image = jQuery('<img />', 
       {   
           title: "Booya",
           src:   "http://example.com/boofar.jpg",
           css: {
                  border: "12px",
                  width : "95px",
                  height: "95px"
                }
      });

You'll run into issues obtaining correct width/height with webkit browsers when it's set explicitly vs. it's actual width/height. You might want to take a peek at this: Get the real width and height of an image with JavaScript? (in Safari/Chrome)