Ich versuche einen Weg zu finden, um die Ausrichtung von Bildern (Querformat oder Hochformat) zu erkennen.Erkennung der Ausrichtung von Bildern mit Javascript
Der HTML-Code enthält einfach einige IMG-Tags, deren Quelle bereits ausgefüllt ist. Das Skript sollte dann die Ausrichtung erkennen und die Bilder zu dynamisch erstellten divs hinzufügen, die als Miniaturansichten fungieren.
Das Skript, das ich verwendet haben, ist dies (es hier irgendwo gefunden auf)
for (i = 0; i < pics.length; i++) {
pics[i].addEventListener("load", function() {
if (this.naturalHeight > this.naturalWidth) {
this.classList.add("portrait")
} else {
this.classList.add("landscape")
}
})
}
dies nun in der Regel gut funktioniert, wenn zuerst die Seite geladen wird. Beim Aktualisieren verhält es sich jedoch unregelmäßig, fügt einigen Bildern die richtige Klasse hinzu und fügt anderen keine Klasse hinzu.
Ich habe auch versucht, diese
for (i = 0; i < pics.length; i++) {
var img = pics[i];
var width = img.naturalWidth;
var height = img.naturalHeight;
if (height > width) {
img.classList.add("portrait")
} else {
img.classList.add("landscape")
}
}
Welche auch unvorhersehbar funktioniert. Allen Bildern wird eine Klasse hinzugefügt, aber einige erhalten die falsche.
Ich vermute, die Probleme könnten von den Bildern kommen, die nicht vollständig geladen werden, bevor das Skript ausgeführt wird und damit das Skript nicht in der Lage ist, sie richtig zu messen, aber ich bin mir nicht sicher. Wie auch immer, ich weiß auch nicht, wie ich es beheben soll.
eine Vorstellung davon zu geben, was ich werde, hier ist ein Link zu der Seite: http://pieterwouters.tumblr.com/
Irgendwelche Ideen sehr geschätzt.
Ist Ihr Skript oben oder unten auf der Seite? – inarilo
Dieses Skript sollte ausgeführt werden, nachdem die Seite geladen wurde. Wie führst du es jetzt aus? –
Es befindet sich am Ende der Seite oder zumindest so weit unten, wie tumblr es zulässt (da es ein eigenes automatisches Skript hinzufügt), also sollten die Bilder theoretisch vor dem Skript geladen werden. –