Görüntü tamamen yüklenmeden önce Javascript ile görüntü boyutlarına getir

Question

Görüntü tamamen yüklendiğinde görüntü boyutlarını elde etmenin çeşitli yollarını okudum, ancak yüklendikten sonra herhangi bir resmin boyutlarını almak mümkün olabilir mi? ?

Aramayla bu konuda fazla bir şey bulamadım (ki bu da bana imkansız olduğunu gösteriyor), ancak bir tarayıcı (Firefox'umda) yeni bir sekmede açtığım herhangi bir resmin boyutlarını gösterir. Sadece resim yüklemeye başladıktan sonra başlığında bana gerçekten bir yol olduğunu umuyorum ve sadece onu bulmak için doğru anahtar kelimeleri kaçırdım.

Answer 1

Tam olarak yüklenmeden önce görüntü boyutlarının alınabileceği konusunda haklısınız.

İşte çözeltisi (demo) var:

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'); } 

Answer 2

Tek yol, yalnızca yanıtın HTTP Üstbilgisini soran HEAD isteğini kullanmaktır. HEAD cevaplarında biliyorum, bedenin büyüklüğü dahildir. Ama resimlerin boyutu için uygun bir şey olup olmadığını bilmiyorum.

Answer 3

Aslında çok daha kolay, sadece resmin Onload fonksiyonundaki boyutlara getirmek zorundayız.

var tempImage1 = new Image(); 
tempImage1.src = "path/to/image"; 
tempImage1.onload = function() { 
    console.log(tempImage1.width, tempImage1.height); 
} 

Answer 4

Aşağıdaki kod, kullanılabilir olduğu anda genişlik/yükseklik değerini döndürür. Test için, önbelleğe almayı önlemek için görüntü kaynağında abc123 değişkenini herhangi bir rastgele dizeye değiştirin. Ayrıca, JSFiddle Demo da bulunmaktadır.

<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>