Wenn Bild zu laden begonnen hat, zeigt div

Question

Die folgende, glaube ich, wartet, bis das Bild vollständig geladen ist:

$('.some-img').load(function(){ 
    $('.img-container').show(); 
}); 

Was ich aber will, ist zu warten, bis das Bild zu laden begonnen hat und Passen Sie die Höhe des Bildcontainers basierend auf der Höhe des Bildes an.

Die Höhe des Containers ist reaktionsfähig height: auto und die Bilder haben unterschiedliche Höhen, so dass der Container ohne Höhe (nur 20px Polsterung) beginnt und dann seine Höhe schnell an die Höhe des Bildes im Inneren anpasst, was irgendwie ist Gitter jedes Mal, wenn es lädt.

Gibt es eine Möglichkeit zu überprüfen, ob das Bild so zu laden, hat damit begonnen, dass ich die Höhe des Behälters Bild anpassen kann,dann $('.imagemodal-container').show() tun, als für das gesamte Bild wartet nicht gut UX zu laden.

Answer 1

Mit der getImageSize Funktion von this answer:

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

Da Bilder, die der Wrapper Breite größer als die img sind (600px) verkleinert bekommen zu passen, ich die Höhe basierend auf dem Verhältnis einzustellen hatte, und auch Berücksichtigen Sie die konstante Füllung von 20px + 20px oben und unten:

getImageSize($('.showcase-img'), function(width, height) { 
    width > 600 ? calculatedHeight = 600/width * height + 40 : calculatedHeight = height + 40; 
    $('.showcase-img-wrapper').css("height", calculatedHeight+"px"); 
    $('.imagemodal-container').show(); 
});