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

Question

Сначала высота изображения равна нулю, после обновления страницы я получаю ее фактическую высоту. Мне нужно получить его высоту в первый раз? может ли какое-нибудь тело мне помочь?

$j(document).ready(function(){
           var imgV = new Image();
           imgV.src="http://www.kerrvilletexascvb.com/Riverside%20Nature%20Center3.JPG";
           $j("#imgD").html(imgV.height);
           alert(imgV.height);
});


<div id="imgD"></div>
<img src="http://www.kerrvilletexascvb.com/Riverside%20Nature%20Center3.JPG" />

Answer 1

Вам не нужно вставлять изображение в DOM, чтобы получить его размеры:

$("<img />")
    .attr("src", "http://www.google.com/intl/en_ALL/images/logo.gif")
    .load(function() {
        alert(this.width);
        alert(this.height);
    })
;

Answer 2

Размер изображения доступен только при загрузке изображения. Скорее всего, когда вы перезагрузите страницу, изображение будет немедленно отправлено из кэша, поэтому его размер будет мгновенно доступен.

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

Отображая за пределами экрана, я имею в виду вставку его в 1x1 пиксель div с переполнением : скрытый стиль где-то внизу страницы.