Как добавить размеры к динамическим элементам img

Да, вы можете, вы можете использовать методы width() и height() для получения размеров изображений. Спасибо JQuery.

Больше информации:

• width ()
• height ()

Обновить комментарий без ошибок:

load даже запускается, когда все изображения и внешние ресурсы загружены на страницу вместе с DOM, поэтому вы можете использовать это и использовать методы width() и height() для получения размеров изображений. Пример:

$(window).load(function(){
  // your code to get dimensions, manipulate images, etc
})

попробуй это:

$('#container img').css('height', function(index, value){
    return $(this).height()+ 'px';
})
$('#container img').css('width', function(index, value){
    return $(this).width() + 'px';
})

ИЗМЕНЕНО

хорошо, я пробовал что-то подобное, и когда я проверяю элементы с помощью firebug, атрибуты высоты и ширины имеют правильные значения ....

$(document).ready(function(){

  $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
        function(data){
          $.each(data.items, function(i,item){
            $("<img/>").attr("src", item.media.m).appendTo("body");
            if ( i == 999 ) return false;
          });
          $('img').css('height', function(index, value){
              return $(this).height()+ 'px';
          });
          $('img').css('width', function(index, value){
              return $(this).width()+ 'px';
          });
  });
})

демонстрация

Используйте $ (document) .ready (), чтобы дождаться полной загрузки изображений.

готов (обработчик)

обработчик - функция, выполняемая после того, как DOM будет готов.

Хотя JavaScript предоставляет событие загрузки для выполнения кода при визуализации страницы, это событие не запускается, пока все ресурсы, такие как изображения, не будут полностью получены.

Решение Рейгеля, теперь с использованием $ (document) .ready ():

$(document).ready(function() {
    $('#container img').css('height', function(index, value){
        return $(this).height()+ 'px';
    });
    $('#container img').css('width', function(index, value){
        return $(this).width() + 'px';
    });
});

[РЕДАКТИРОВАТЬ]: Я только что понял, что это может не сработать, когда вы вставляете изображения после загрузки страницы, но я думаю, что стоит попробовать:

$('#mydiv').html('<img .../><script language="javascript" type="text/javascript">$(document).ready(...)</script>');

$('#container img').each(function(){
var pic_real_width;
var pic_real_height;

$(img).load(function() {
    // Remove attributes in case img-element has set width and height
    $(this).removeAttr("width")
           .removeAttr("height")
           .css({ width: "", height: "" }); // Remove css dimensions as well

    pic_real_width = this.width;
    pic_real_height = this.height;
});

var src = img.src;
img.src = "";
img.src = src; // Triggers onload if image is cached
});

Благодарим Xavi

Другое предложение:

Загрузите изображения через AJAX в фоновом режиме и надейтесь, что браузер кэширует их, чтобы они были мгновенно там, когда вы добавляете элементы в свой div (и вы можете сразу же получить width () и height ()). ;)

Если у вас есть доступ к веб-серверу, который отправляет эти изображения: Убедитесь, что вы установили соответствующие заголовки кеша.

[EDIT]: вместо того, чтобы полагаться на кеш, вы также можете поместить данные изображения, который вы только что загрузили через AJAX прямо в исходный код. К сожалению, в IE это явно не работает.

<img src="data:<mimetype>;base64,<data>" />

Для кодирования данных используйте функцию, подобную этой.