JavaScript Prüfen ob Element sichtbar ist

[Dawen]

Hallo,

ich habe folgendes Stück HTML

<div id="top">
     <a target="_blank" href="./temp/55797c5ddf9f0.php">
           <img src="./temp/55797c5dd38bf.jpg" >
       </a>
 </div>

Wir kann ich mit reinem JS prüfen ob das Bild sichtbar ist ?

Danke im voraus

 

[xeno]

Selbst wenn das Bild nicht unter diesem Pfad existiert, würde der Browser doch einen Platzhalter in Form eines roten Kreuzes einbauen... von daher vermute ich einfach mal, daß du da mit JS nicht sehr weit kommst.

Mein erster Gedanke wäre sowas hier:
PHP: file_exists - Manual

 

[Dawen]

Hi,

das Bild wird platziert, dies kann ich mit Sicherheit sagen. Es kann nur sein, dass mittels CSS der IMG Tag nicht sichtbar ist und dies möchte ich prüfen

 

[xeno]

Ah, okay. Und womit wird das IMG "unsichtbar" gemacht? Mit visibility?

 

[dafuq]

Mit dem folgende Code-Snippet kannst du überprüfen, ob das Bild via CSS als unsichtbar definiert wurde:

var element = document.getElementById("myImage");
var style = window.getComputedStyle(element);

if (style.display === "none" || style.visibility === "hidden")
{
    alert("Das Bild ist unsichtbar!");
}

Und um zu überprüfen, ob das Bild korrekt geladen wurde, kannst du zum Beispiel die Eigenschaft für die originale Breite des Bildes auf Null testen:

var element = document.getElementById("myImage");

if (element.naturalWidth !== "undefined" && element.naturalWidth === 0)
{
    alert("Das Bild wurde nicht korrekt geladen!");
}

 

[easteregg]

bedenke auch, dass man elemente einfach aus dem viewport rausschieben kann, zb mit postion: absolute; und left: -99999px;
oder auf dem parent nen overflow: hidden; und nen margin-left: -9999px;

es gibt da ziemlich viele wege....