JavaScript Prüfen ob Element sichtbar ist

Dawen

New member
Hallo,

ich habe folgendes Stück HTML

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

Moderator
Mitarbeiter
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

New member
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 :)
 

dafuq

Stammuser
Mit dem folgende Code-Snippet kannst du überprüfen, ob das Bild via CSS als unsichtbar definiert wurde:
HTML:
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:
HTML:
var element = document.getElementById("myImage");

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

easteregg

Member of Honour
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....
 
Oben