jQuery IE7 на лету изображения

Question

Упрощенная версия проблемы, которую я вижу в IE7, может быть продемонстрирована с использованием FireBug Lite .

На странице, загруженной с помощью jQuery, я открываю FireBug Lite (через книжный магазин) и вводю следующее:

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

и отраженный результат:

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

Где атрибуты width и height ? Кроме того,

 image.width;

и

 image.attributes.width.value;

вернуть 0 и "0".

Это можно увидеть как в jQuery 1.2.6, так и в 1.4.2. Это правильно делает в IE8 и FF.

Есть идеи, куда делись эти атрибуты? Очень раздражает ....

Answer 1

Вы получите лучшие результаты, используя jQuery для непосредственного создания атрибутов изображения:

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

Вы столкнетесь с проблемами при получении правильной ширины / высоты в браузерах Webkit, когда она явно установлена ​​в сравнении с ее фактической шириной / высотой. Возможно, вы захотите взглянуть на это: Получить реальную ширину и высоту изображения с помощью JavaScript? (в Safari / Chrome)