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

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

1 голос
/ 23 апреля 2010

Я использую вызов Json, чтобы получить список адресов изображений, а затем добавляю их по отдельности в такой раздел.К сожалению, размер изображения не является частью информации Json. 

<div id="container">
   <img src="A.jpg" alt="" />
   <img src="B.jpg" alt="" />
   ...
</div>

Кто-нибудь из вас, гениев JQuery, знает о коде, который безупречно и динамически добавляет истинные Width и Height каждому img элементу в контейнере , как только будет отображен каждый отдельный элемент?

Я подумал, что, возможно, код может выполнить проверку ширины изображения width > 0, чтобы оценить, когдаизображение на самом деле было передано, а затем огонь.Но я бы не знал, как это сделать и заставить работать стабильно.Как лучше всего это сделать?

Обновление, Как указывают ответы, добавив Ширина или Высота вэлементы довольно обычные.Проблема здесь заключается в написании кода, который будет знать , когда , чтобы сделать это.И оцените это условие для каждого изображения , а не страницы в целом.

Обновление 2
Я нашел очень хороший рабочий ответ здесь

Ответы [ 5 ]

1 голос
/ 23 апреля 2010

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

Подробнее:

Обновление в комментариях:

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

$(window).load(function(){
  // your code to get dimensions, manipulate images, etc
})
1 голос
/ 23 апреля 2010

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

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

EDITED

хорошо, я пробовал что-то подобное, и когда я проверяю элементы, используя атрибут 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';
          });
  });
})

демо

0 голосов
/ 30 мая 2010 
$('#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
});

Кредит поступает на Хави

0 голосов
/ 23 апреля 2010

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

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

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

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

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

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

0 голосов
/ 23 апреля 2010

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

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

handler - функция, выполняемая после готовности 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>');
...