Ottieni l'altezza dell'immagine prima del suo caricamento completo

Question

Devo essere in grado di usare jQuery per ottenere l'altezza di un'immagine #imageHero prima che sia completamente caricata nella pagina. Devo quindi impostare l'altezza di un div #imageDiv all'altezza dello #imageHero che viene caricato.

Ho bisogno che questo accada al più presto quando si crea la pagina ... attualmente il codice che sto usando per impostare il div #imageDiv all'altezza dell'immagine #imageDiv sta accadendo lentamente ed il caricamento della pagina sembra strano ...

Qualche suggerimento?

Answer 1

Come menzionato nei commenti, questo ha già risposto here, sebbene in puro JavaScript non JQuery. Ho adattato la risposta a:

• utilizzare jQuery
• Lavora con un'immagine statica
• Creato una semplice funzione che si può chiamare

Ecco la funzione ...

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

    var wait = setInterval(function(){   
     var w = img.width(), 
      h = img.height(); 

     if(w && h){ 
      done(w, h); 
     } 
    }, 0); 

    var onLoad; 
    img.on('load', onLoad = function(){ 
     done(img.width(), img.height()); 
    }); 


    var isDone = false; 
    function done(){ 
     if(isDone){ 
      return; 
     } 
     isDone = true; 

     clearInterval(wait); 
     img.off('load', onLoad); 

     callback.apply(this, arguments); 
    } 
} 

È possibile chiamare la funzione con un elemento immagine e una richiamata che accetta argomenti larghezza e altezza ...

getImageSize($('#imageHero'), function(width, height){ 
    $('#imageDiv').height(height); 
}); 

Fiddle - Per vedere l'effetto completo assicurarsi che l'immagine non è nella vostra cache (aggiungere un caso alla fonte immagine).

Answer 2

Un miglioramento sulla risposta @Drahcir's, questa versione restituisce l'altezza effettiva e presenta altri miglioramenti. Per testare la modifica di abc123 nell'origine immagine su qualsiasi stringa casuale per impedire la memorizzazione nella cache.

C'è un JSFiddle Demo pure.

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