Как я могу получить ширину / высоту изображения, прежде чем добавить его в DOM / браузер? - PullRequest
Новая
       29

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

3 голосов
/ 20 августа 2011

Я хотел бы вывести ширину и высоту изображения , прежде чем добавить это в браузер . Конечно, я получаю 0 для ширины и 0 для высоты, потому что изображение еще не добавлено в DOM.

У меня загружено мой код для http://jsfiddle.net/BF5En/4/

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

Спасибо, заранее!

Ответы [ 2 ]

3 голосов
/ 22 августа 2011

У вас, кажется, очень интересные вопросы.Это мой скромный ответ: 

$(document).ready(function() {
    $(".Photos a").click(function () {
        var href_attribute = $(this).attr('href');
        var new_item = $('<img src="' + href_attribute + '" />')
            .hide()
            .load(function () {
                alert('Img was loaded! Width: ' + this.width + ' and height: ' + this.height);
            })
            .fadeIn(2000)
            .appendTo('.AppendingDiv');
        return false;
    });
});

Живой пример: http://jsfiddle.net/hobobne/BF5En/10/

Видите ли, вы должны убедиться, что изображение предварительно загружено, для этого мы используем .load(),В противном случае вы получите 0 .Это на самом деле хорошо, потому что это означает, что скрипт работает, просто все так быстро, что он может получить размеры..load() гарантирует, что изображение сначала загружается и только затем получает размеры.

Для любых целей, которые вы хотели использовать размеры, я рекомендую делать это и внутри .load().Потому что у вас, вероятно, все равно будет несколько .Photos a.

Кроме того, как вы могли заметить, ваш .fadeIn(2000) не работал.Это потому, что ваш предмет был добавлен до того, как вы его назвали.Как вы видите, я исправил это для вас:)

NB! Извините, я переименовал некоторые переменные (в моей голове стало больше логики).

0 голосов
/ 20 августа 2011 
var MyitemWidth = item.css('width');
var MyitemHeight = item.css('height');

см. Этот ответ Получение автоматического размера IMG перед добавлением его в DOM (с использованием JQuery) 

DOM elements have dimensions only when added to a parent, as dimension is determined by the 
rendering engine. To go around this issue, have a <div> container absolutely positioned off 
screen, add the image to it first, get the dimension, then add the image at it's final destination.
...