Изменение размера изображения jQuery - по переменной и напрямую дает разные результаты - PullRequest
Новая
       21

Изменение размера изображения jQuery - по переменной и напрямую дает разные результаты

1 голос
/ 06 марта 2012

У меня есть несколько строк JavaScript, использующих jQuery для изменения размера изображений в виде миниатюр. 

    var thumb = $(this);
    thumb.load(function() {
        var ratio = thumb.height() / config.maxHeight;
        var newWidth = Math.ceil(thumb.width() / ratio);
        thumb.height(config.maxHeight);

        // this line matters
        thumb.width(newWidth);
    });

К счастью, это работает отлично.Но если я заменю последнюю строку на: 

        thumb.width(Math.ceil(thumb.width() / ratio));

Это изменит ширину изображений, у которых явно не определены размеры (слишком узкие).Мне кажется, что это абсолютно эквивалентные способы - через переменную или напрямую - но, очевидно, это не так.

Я попытался привести результат ceil () к числу или целому числу, и он вел себя противоположным образом - изображения с неопределенным размером были в порядке, но остальные были слишком широкими (ширина исходного изображения).

Хотя первое решение работает, я думаю, что я упускаю что-то фундаментальное.Поэтому я хочу избежать этого в будущем.

Спасибо!

Ответы [ 2 ]

0 голосов
/ 06 марта 2012

Я бы предположил, что элемент <img>, которым вы управляете, не имеет объявленных атрибутов height или width.Если это так, то проблема заключается в том, как браузеры разумно изменяют размеры изображений с учетом только одного ограничения.

Если у вас есть изображение шириной 1000 пикселей и высотой 1000 пикселей, и вы пишете тег IMG, например, так: 

<img src="big_image.gif" width="10" />

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

Итак, в строке, где вы изменяете высоту: 

thumb.height(config.maxHeight);

браузервперед также изменяет ширину.Если впоследствии вы прочитаете ширину (то есть thumb.width(Math.ceil(thumb.width() / ratio))), вы будете читать новую ширину, а не ширину, которую она имела до того, как получила новую высоту.

0 голосов
/ 06 марта 2012 
var someImg = new Image();
someImg.src = <theURLofDesiredImage>
alert(someImg.width + " : " + someImg.height);

Это не Jquery, а его ванильный JS, и это верный способ определения "незагруженного" (не кэшированного!) Изображения. Добавление строки запроса к URL url + "?asdasdasdadads" позволит вам обойти браузер, кэширующий изображение. Это приведет к увеличению времени загрузки изображения, но вы ВСЕГДА и, что более важно, PREDICTABLY разрешите динамически загружаемое изображение.

...