JS Funktion erst ausführen wenn Element sichtbar ist?

Ich habe eine Funktion und möchte dass diese erst ausgeführt wird wenn ein bestimmtes Element sichtbar ist... Wie könnte man das lösen?

Answer 1

[MrAmazing2]

Da fehlt noch ein bisschen Information, aber ich nehme mal an, das wird sichtbar gemacht, indem per JavaScript eine CSS-Eigenschaft wie display: none auf display: block geändert wird.

Außerdem nehme ich an, dass du keinen Zugriff auf den Code hast, der die Sichtbarkeit dieses Elements ändert - z.B. weil es von einer anderen Seite eingebunden ist.
Ansonsten könntest du deinen Code ja einfach da einfügen, wo die Sichtbarkeit verändert wird...

Angenommen meine Annahmen sind korrekt (ansonsten sag bescheid), ginge es so:

Du kannst CSS-Änderungen eines Elements mithilfe eines MutationObservers erfassen und daraufhin deinen Code ausführen lassen.

const target = document.getElementById('myId');
const observer = new MutationObserver(mutations => {
  mutations.forEach(_ => {
    if (target.style.display !== "none") {
      console.log("Sichtbar");
    }
  });    
});

observer.observe(target, { attributes : true, attributeFilter : ['style'] });

Demo: https://jsfiddle.net/a4o0tqen/

Woher ich das weiß: Hobby – Programmieren ist mein Hobby & Beruf

Comments

[Yoshi1029]

Erstmal danke für deine Hilfe... Eigtl ging es aber eher um eine Funktion die einen Countdown auslöst und da wäre es ja blöd wenn der schon startet obwohl man ihn nicht sieht. Der Countdown soll also erst starten wenn das er sichtbar ist (im viewport)...verstehst du?

[MrAmazing2]

@Yoshi1029

Achso im Viewport...

Füg einfach deinen JavaScript Code ganz am Ende des HTML Codes ein, dann wird er erst danach ausgeführt.

Oder du benutzt das "load"-Event

windows.addEventListener('load', (event) => {
  console.log('page is loaded');
});