2017-04-15 20 views
2

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.

+0

Ist Ihr Skript oben oder unten auf der Seite? – inarilo

+0

Dieses Skript sollte ausgeführt werden, nachdem die Seite geladen wurde. Wie führst du es jetzt aus? –

+0

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

Antwort

2

Wenn das Bild geladen ist bereits, wenn Sie pic.addEventListener("load", ...) aufrufen, wird die Last Event-Handler ausgelöst werden. Sie sollten es aufrufen, wenn pic.complete wahr ist, wie in this answer vorgeschlagen.

var pics = document.querySelectorAll("img"); 
 
var pic; 
 

 
for (i = 0; i < pics.length; i++) { 
 
    pic = pics[i]; 
 
    if (pic.complete) { 
 
    // The image is already loaded, call handler 
 
    checkImage(pic); 
 
    } else { 
 
    // The image is not loaded yet, set load event handler 
 
    pic.addEventListener("load", function() { 
 
     checkImage(this); 
 
    }) 
 
    } 
 
} 
 

 
function checkImage(img) { 
 
    if (img.naturalHeight > img.naturalWidth) { 
 
    img.classList.add("portrait") 
 
    } else { 
 
    img.classList.add("landscape") 
 
    } 
 
}
img { 
 
    border: 1px solid; 
 
} 
 

 
.landscape { 
 
    border-color: red; 
 
} 
 

 
.portrait { 
 
    border-color: blue; 
 
}
<img src="//placehold.it/50x100"> 
 
<img src="//placehold.it/200x100">

Dank Ricky. Ich habe die Bildlinks und die Stilattribute aus seiner Antwort ausgeliehen.

1

Für einen sichereren, aber teureren Ansatz könnten Sie die Bilder im Speicher duplizieren und die entsprechende Klasse hinzufügen.

const images = [...document.querySelectorAll('img')].map(el => { 
 
    return new Promise((resolve, reject) => { 
 
    let img = new Image(); 
 
    img.addEventListener('load', function() { 
 
     const { 
 
     naturalHeight, 
 
     naturalWidth 
 
     } = img; 
 
     if (naturalHeight > naturalWidth) el.classList.add("portrait"); 
 
     else el.classList.add("landscape"); 
 
     img = null; //GC 
 
     resolve(); 
 
    }); 
 
    img.src = el.src; 
 
    }); 
 
});
img { 
 
    border: 1px solid; 
 
} 
 

 
.landscape { 
 
    border-color: red; 
 
} 
 

 
.portrait { 
 
    border-color: blue; 
 
}
<img src="//placehold.it/50"> 
 
<img src="//placehold.it/50x100"> 
 
<img src="//placehold.it/200x100"> 
 
<img src="//placehold.it/50x60"> 
 
<img src="//placehold.it/10x30"> 
 
<img src="//placehold.it/50x20">

0

Danke für die Hilfe!

ConnorsFan, basierend auf Ihren früheren Kommentar, den ich ein Teil berücksichtigt bereits geladene Bilder aufzunehmen aufgenommen und kam mit diesem

// forgot to mention this part in my original post 
var pics = document.getElementsByTagName("img"); 

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") 
     } 
    }) 
    if (pics[i].complete) { 
     if (pics[i].naturalHeight > pics[i].naturalWidth) { 
      pics[i].classList.add("portrait") 
     } else { 
      pics[i].classList.add("landscape") 
     } 
    } 
} 

Welche funktioniert, scheint Ihre Lösung ein wenig elegant mehr aber so werde ich wahrscheinlich benutze das.

Verwandte Themen