Ich habe ein Array von<li> Elemente, die ich versuche, in ein Karussell zu verwandeln, nur dass ich möchte, dass die Größe der Bilder geändert wird, wenn sie größer als 640 x 480 sind.

Ich habe den folgenden Code: HTML:

<ul id="carousel">      
    <li><img src="pic1.jpg" /><p><b>2012</b> something</p></li>
    <li><img src="pic2.jpg" /><p><b>2016</b> something else.</p></li>
</ul>

JQuery:

var imW=[];
var imH=[];
//...
$('li',obj).each(function(index){ 
    itemSources.push( $(this).find('img').attr('src') );                
    var img = $(this).find('img'); 
    imW.push(img.width());
    imH.push(img.height());
});

Ich benutze dannitemSources[i], imW[i] undimH[i], um die Größe meines Bildes zu ändern und die erforderlichen Auffüllungen hinzuzufügen, um es im Rahmen zu zentrieren.

Was funktioniert, vorausgesetzt, mein Internet ist schnell genug und die Bilder werden geladen, bevor die Größe berechnet wird. (Ha!

Ich weiß, ich möchte etwas wie:

var img = new Image();
img.onload = function() {
    console.log(this.width + 'x' + this.height);
};
img.src = $(this).find('img').attr('src');

Aber ich kann die Breite und Höhe nicht speichern, da das bloße Verschieben in die Arrays nicht mehr möglich ist und auch das Erstellen eines externen Rückrufs. Wie kann ich die Größen, die so einfach auf der Konsole gedruckt werden, in meinen imW- und imH-Arrays speichern?