Unterscheiden zwischen vertikalen und horizontalen Bildformat jQuery

Question

Ich möchte unterscheiden, ob ein Bild vertikal oder horizontal ist und eine spezielle Klasse hinzufügen. Ich benutze das, um mein div vollständig mit meinem Bild zu füllen.

Mein HTML:

<a href="images/gallerie/image-1.jpg" data-lightbox="image-1" class="impression"> 
    <img src="images/gallerie/image-1.jpg"> 
</a> 

Meine CSS:

.wide { 
    height: 100%; 
    width: auto; 
} 

.tall { 
    height: auto; 
    width: 100%; 
} 

Meine JS (jQuery):

$('.impression').find('img').each(function() { 
    if($(this).width()/$(this).height() > 1) { 
     $(this).addClass('wide'); 
    } 

    else { 
     $(this).addClass('tall'); 
    } 
}); 

Es funktioniert nur manchmal, und ich weiß nicht, warum. Auf meinem iPhone funktioniert es nie (; Chrome).

Hat jemand eine andere Lösung oder vielleicht der Grund, warum es manchmal funktioniert?

Danke!

Answer 1

Sie benötigen einen Last-Ereignishandler verwenden, so Bild geladen wird, bevor Sie Dimensionen überprüfen

$('.impression').find('img').on('load',(function() { 
    // image is loaded now 
    if($(this).width()/$(this).height() > 1) { 
     $(this).addClass('wide'); 
    } 

    else { 
     $(this).addClass('tall'); 
    } 
}); 

Die each nicht als jQuery benötigt wird, wird each intern verwenden und this werden Bild Instanz

Answer 2

sein Die meisten Wahrscheinlich laufen Sie die Funktion zu früh und Ihre Bilder wurden noch nicht geladen. Um sicherzustellen, können Sie immer console.log() die Werte .width() und .height().

Die beste Methode, um sicherzustellen, dass das Bild geladen wurde, wenn Sie seine Abmessungen überprüfen, ist die Verwendung des Ereignisses load.

$('img').on('load', function(){ 
    // do your thing... 
}) 

Der Rest ist falsch, wie @charlietfl hingewiesen. Das Ereignis load für img wird nicht weitergegeben.

noch besser, statt zu jedem img einen Zuhörer zu binden, binden nur ein auf body für alle Ihre Bilder, einschließlich die, die Sie später laden wird, einige ausgefallene Asynchron-Methode:

$('body').on('load', 'img', function(){ 
    // do your thing... 
}) 

Diese Die zweite Version wird jedes Mal ausgeführt, wenn ein wird load in Ihrem DOM, nicht nur, wenn Sie die script ausführen.