Как определить ширину / высоту img динамически загружаемых изображений в IE? - PullRequest
Новая
       10

Как определить ширину / высоту img динамически загружаемых изображений в IE?

6 голосов
/ 02 июня 2010

Моя разметка - это простой элемент div с идентификатором 'load'. Используя jQuery, я загружаю список элементов изображения в этот div: 

$('#load').load('images.html', { }, function() {
  $(this).onImagesLoad({
    selectorCallback: function() {
      ....do something....
    }
  });
});

где images.html такой список: 

<img src='1.jpg' caption='img 1'>
<img src='2.jpg' caption='img 2'>
...

Чтобы обеспечить полную загрузку всех изображений, я использую плагин onImagesLoad . Пока что это прекрасно работает во всех браузерах.

Однако в IE8 (и я предполагаю, что и другие версии IE), когда я затем перебираю элементы img, я не могу определить ширину / высоту загружаемых изображений. Атрибуты image.context.naturalWidth и naturalHeight не работают.

Как мне узнать размер изображения?

Спасибо, куча:)

Обновление

@ Саймон: Это не сработало в IE, а также сломало другие браузеры.

@ Jenechka: Если "imageDomElement" - это просто другое имя переменной "image" в моем примере выше, то это не работает. Или что вы подразумеваете под этим DomElement?

Ответы [ 7 ]

2 голосов
/ 02 июня 2010

Если вы не изменили размер изображения, вы можете использовать: 

image.width()

и 

image.height()
1 голос
/ 03 июня 2010

Это очень похоже на другие ответы, но я протестировал его в IE7, поэтому он может быть ближе к тому, что вы хотите: 

$(document).onImagesLoad({
  selectorCallback: function() {
      $('img').each(function(){
         alert($(this).width()+', '+$(this).height()); 
      });
  }
});

См. здесь , возможно, это не совсем то, как вы его использовали, но я не знаком с этой вещью onImagesLoad.

0 голосов
/ 13 сентября 2010

А как же? 

$("#load img").each(function() {
   var img = new Image();
   img.src = this.src;
   alert(img.height + " x " + img.width);
});
0 голосов
/ 13 сентября 2010

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

Когда я загружаю исходные изображения, тогда да, файл загружается и объекты изображения генерируются. Но кажется, что атрибуты еще не верны, и они не будут, пока изображение фактически не добавлено в DOM сайта и не отрендерено. Div / image в hide () в IE не имеет никакой информации об измерениях, в Safari есть некоторая доступная информация. Например, без добавления следующего div в любом месте 

var test = $("<div><img src='test.jpg'></div>")

изображение содержит следующую информацию:

  • width() = 0
  • attr("width") = 600,
  • css("width") = "" и
  • img[0].clientWidth = 0.

Это на Сафари; в IE это то же самое, за исключением attr("width") = 0 и css("width") = "auto". Теперь я не могу это использовать, и именно это сломало мой сценарий и почему я опубликовал свой первоначальный вопрос. Однако в тот момент, когда я добавляю этот div и отображаю его, все правильные значения появляются в объекте изображения.

Я пишу небольшую галерею, которая показывает все изображения, которые у меня есть во втором загружаемом файле .html; эта галерея, однако, вычисляет и размещает миниатюры и подготавливает изображения, которые она показывает, в полном разрешении. Чтобы это выглядело нормально, я в основном хотел создать все это скрытым, а затем добавить его. Увы, кажется, что вся эта идея не оправдается. Друг предложил загрузить все в крошечный iframe слева, где он не виден, и работать с этим. Возможно, это путь.

Еще одна вещь, которую я заметил, и которая, похоже, очень тесно связана с вышеупомянутой проблемой загрузки, это clone (). Кажется, что если изображение отображается, 

var newimg = img.clone()

генерирует тот же «пустой» объект изображения, с которым мне приходится иметь дело выше. Даже если исходное изображение видно и содержит все нужные атрибуты, его клон не отображается.

Сейчас я не вижу другого пути, кроме как переосмыслить и переписать части моей галереи.

0 голосов
/ 03 июня 2010

Используйте следующий код вместо 

$(document).onImagesLoad({
      selectorCallback: function() {
          $('img').each(function(){
             alert($(this)[0].clientWidth +', '+$(this)[0].clientHeight); 
          });
      }
    });
0 голосов
/ 03 июня 2010

Если вы играете с JQuery, то image.attr (ширина) должен добиться цели Но почему бы не использовать документ. Вместо этого, вы можете получить меньше головной боли. .

0 голосов
/ 02 июня 2010 
imageDomElement.width
imageDomElement.height

или попробуйте 

imageDomElement.clientWidth
imageDomElement.clientHeight
...