Получите размеры изображения с помощью Javascript до полной загрузки изображения

javascript image loading dimensions

38496 просмотра

4 ответа

Я читал о различных способах получения размеров изображения после полной загрузки изображения, но можно ли получить размеры любого изображения после его загрузки?

Я не нашел много об этом путем поиска (что заставляет меня поверить, что это невозможно), но тот факт, что браузер (в моем случае Firefox) показывает размеры любого изображения, которое я открываю в новой вкладке прямо в заголовке после это только начало загружать изображение дает мне надежду, что на самом деле есть способ, и я просто пропустил правильные ключевые слова, чтобы найти его.

Автор: user828591 Источник Размещён: 12.11.2019 09:02

Ответы (4)


42 плюса

Решение

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

Вот решение ( демо ):

var img = document.createElement('img');

img.src = 'some-image.jpg';

var poll = setInterval(function () {
    if (img.naturalWidth) {
        clearInterval(poll);
        console.log(img.naturalWidth, img.naturalHeight);
    }
}, 10);

img.onload = function () { console.log('Fully loaded'); }
Автор: katspaugh Размещён: 04.07.2011 07:20

11 плюса

Следующий код возвращает ширину / высоту, как только она становится доступной. Для тестирования измените abc123источник изображения на любую случайную строку, чтобы предотвратить кеширование.

Также есть демоверсия JSFiddle .

<div id="info"></div>
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/d/da/Island_Archway,_Great_Ocean_Rd,_Victoria,_Australia_-_Nov_08.jpg?abc123">

<script>
getImageSize($('#image'), function(width, height) {
    $('#info').text(width + ',' + height);
});

function getImageSize(img, callback) {
    var $img = $(img);

    var wait = setInterval(function() {
        var w = $img[0].naturalWidth,
            h = $img[0].naturalHeight;
        if (w && h) {
            clearInterval(wait);
            callback.apply(this, [w, h]);
        }
    }, 30);
}
</script>
Автор: aleemb Размещён: 02.08.2015 06:49

1 плюс

Одним из способов является использование запроса HEAD, который запрашивает только заголовок HTTP ответа. Я знаю в ответах HEAD, размер тела включен. Но я не знаю, есть ли что-нибудь для размера изображений.

Автор: Saeed Neamati Размещён: 04.07.2011 07:02

1 плюс

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

var tempImage1 = new Image();
tempImage1.src = "path/to/image";
tempImage1.onload = function() {
    console.log(tempImage1.width, tempImage1.height);
}
Автор: user1219381 Размещён: 28.07.2014 10:35
Вопросы из категории :
32x32