Bezdepbonusu7Программирование: статьи и ответы
Меню

Вопрос

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

Автор вопроса: MohammadОтветов: 5

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

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

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

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

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

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

  • Тупой вопрос: зачем вам устанавливать атрибуты ширины и высоты? RoToRa 23.04.2010
  • ага, почему? ... вам не нужно .. потому что, если вам нужны размеры позже, вы можете .width() или .height() это ... я потерялся здесь? Reigel 23.04.2010
  • @RoToRa: Мне это нужно, так как после этого я выполню некоторые манипуляции с DOM над изображениями, которые требуют знаний о высоте и ширине изображения. @Reigel, да, конечно, и все нижеприведенные ответы указывают на это, но вопрос не об этом. Mohammad 23.04.2010
  • Только что нашел это решение: stackoverflow.com/questions / 2392410 / balu 23.04.2010
  • @codethief: это, вероятно, ответит на мой вопрос .. Я изучаю это, спасибо !! Mohammad 23.04.2010

jsonjquerydomimage-manipulation

Ответы

Ответ 1 · рейтинг 1 · Sarfraz

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

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

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

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

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

Ответ 2 · рейтинг 1 · Reigel

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

$('#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';
          });
  });
})

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

Ответ 3 · balu

Используйте $ (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>');

Ответ 4 · Mohammad

$('#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 а>

Ответ 5 · рейтинг -1 · balu

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

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

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

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

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

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

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы