Получение высоты изображения до загрузки изображения в HTML

Question

У меня есть таблица, которая динамически создается с использованием DIV. В каждой строке таблицы есть два изображения. Я хочу установить высоту для div (который представляет конкретную строку) равной высоте изображения, которая больше двух изображений, отображаемых в этой конкретной строке. Отображаемые изображения всегда будут меняться, и они с внешнего сервера.

Как мне установить высоту для моего div, чтобы я мог соответствовать изображениям?

Answer 1

Если вы пытаетесь динамически изменить размер пары div в строке в таблице, вам, возможно, лучше использовать html-таблицу и иметь каждое изображение в теге td. Это позволит изменить размер тега tr соответственно для изображения в каждой ячейке.

Answer 2

  this.img = new Image();
  this.img.src = url;
  alert(this.img.width);

дает ширину, а

  var img = new Image();
  img.src = url;
  alert(img.width);

оленья кожа ..

Не знаю, почему.

Answer 3

Вы можете:

1. Не указывайте высоту div, и пусть он расширяется автоматически

2. После загрузки изображения выполните:

   document.getElementById ("myDiv"). Height = document.getElementById ("myImage"). Height

Answer 4

На этот вопрос ответили несколькими способами, и вы задали дополнительный вопрос: «Не из-за этого ли пользовательский интерфейс будет выглядеть плохо?»

Ответ на этот вопрос - Да. В большинстве случаев лучше всего будет установить высоту вашего div на что-то, что выглядит хорошо, а затем уменьшите размер изображения до нужного размера. Это ускорит рендеринг, а конечный продукт будет выглядеть лучше и профессиональнее.

Но это только мое личное мнение. У меня нет эмпирических данных, подтверждающих это.

Answer 5

Если вы хотите, чтобы браузер делал макет на основе высоты изображения, перед тем, как он извлечет изображение, вам нужно отправить эту высоту в браузер куда-нибудь. Это потребует чего-то на стороне сервера. Быстрее всего было бы вставить непосредственно в HTML. Медленнее, но более элегантно было бы получать его изображение за изображением с помощью операторов , которые получают инструкции от специального бита cgi, генерирующего javascript. (Разница в скорости происходит из-за сетевых поездок.)

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

Answer 6

Нам понадобится немного больше информации, чтобы быть очень полезной. Вы можете получить высоту и ширину изображения после загрузки страницы через Javascript ( info ), затем вы можете изменить высоту div после загрузки. В противном случае вам действительно не повезло, поскольку в самом HTML ничего нет.

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

Answer 7

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

Может понадобиться умница для работы во всех браузерах ...

function getSize(imgSrc){

    var aImg = new Image();

    aImg.src = imgSrc;

    aHeight = newImg.height;
    aWidth = newImg.width;

}