Получение автоматического размера IMG перед добавлением его в DOM (с использованием JQuery)

Question

Я динамически добавляю IMG-компоненты в свою DOM с помощью JQuery, но в зависимости от их размера я буду добавлять их по-разному.У кого-нибудь есть хорошая идея для получения автоматических размеров IMG ДО того, как я добавлю его в DOM?

ПРИМЕЧАНИЕ: Я играл с фрагментом DOM JQuery, как описано здесь , но размеры img были = 0.

Answer 1

Элементы DOM имеют размеры только при добавлении в родительский элемент, поскольку размерность определяется механизмом рендеринга. Чтобы обойти эту проблему, поместите контейнер <div> абсолютно за пределы экрана, сначала добавьте к нему изображение, получите размер, а затем добавьте изображение в конечный пункт назначения.

Что-то вроде:

var _offscreen = $('<div></div>')
    .css({position:'absolute',left:'-999999px',width:'400px',height:'600px'})
    .appendTo($('body'));

var img = $('<img>/img>')
    .attr('src',"http://l1.yimg.com/a/i/ww/news/2011/03/25/zo.jpg")
    .load(function() {

      var $this = $(this);
      $this.appendTo(_offscreen);

      setTimeout(function() {
         var width = $this.width();
         var height = $this.height();

         alert($this.attr('src') + ' = ' + width + "x" + height);      
      }, 0);
});

** РЕДАКТИРОВАТЬ **

Я только что обновил код выше. Как оказалось, вам нужно позволить механизму рендеринга нарисовать изображение (конечно!) И , а затем получить размер. Так что редактирование работает.

Это можно поместить в удобную функцию, такую ​​как:

$('imageElement').loadImage("path/to/image", function() {
   alert("Image " + $(this).attr('src') + " loaded: " + $(this).width() + "x" + $(this).height());
});

** ОБНОВЛЕНИЕ **

Я подумал, что вы могли бы видеть приведенный выше код в плагине JQuery ... просто для удовольствия :) Это просто работает, проверка не выполняется (т.е. она не будет проверять, если вы передать другие элементы, кроме <img>), и если селектор возвращает более одного элемента, плагин загрузит одно и то же изображение в каждый выбранный элемент. На самом деле вы можете иметь аргумент плагина url в виде массива (необязательно) и загружать каждое изображение массива в каждый выбранный элемент и т. Д. Просто мысль.

Answer 2

Вы должны быть в состоянии сделать это без добавления изображения в DOM.Кристоффер (эй, это тоже мое имя!) Находится на правильном пути, но изображение необходимо загрузить, прежде чем вы сможете попытаться прочитать ширину / высоту.

var getImageSize = function(src) {
    var img = new Image();
    $(img).bind('load', function(e) {
        var height = img.height;
        var width = img.width;
        document.write('width:' + width + ', height: ' + height);
    });
    img.src = src;
};

getImageSize('http://farm4.static.flickr.com/3261/5791911248_b777cb1dde_b.jpg');

Демо здесь: http://jsfiddle.net/H3p97/