2016-11-04 3 views
0

Ich möchte etwas ähnlich dem document.ready Ereignis, aber für jedes DOM-Element.Gibt es ein normales Vanilla JS/HTML (oder JQuery) -Ereignis, das ausgelöst wird, wenn ein Element das Rendern startet/beendet?

Genauer gesagt, hacke ich in einer App, die ein benutzerdefiniertes Framework hat. Ich versuche, einen Ladebildschirm hinzuzufügen. Dieser Bildschirm sollte verschwinden, sobald ein bestimmtes Element auf dem Bildschirm erscheint.

Jetzt weiß ich nicht wirklich, wie ich das sauber machen würde, oder was für eine empfohlene Art, solche Dinge zu tun, wäre, aber im Moment wäre es genug, wenn ich das umsetzen könnte Pseudo-Code

container.show_loading_spinner() 
// .. other stuff ... 
// this should only trigger when the next line, which starts creating elements begins 
container.on_drawing_begin(function() 
    {container.hide_loading_spinner()}) 

//when this begins drawing, the spinner should get hidden. 
container.create_some_elements() 

ich weiß, das wahrscheinlich recht komplex ist, und hoffen, dass Art werde ich nicht als Noob außer Acht gelassen werden, aber ich bin in erster Linie auf Backend-Entwicklung konzentriert. Ist das Ding, das ich frage, überhaupt möglich, oder soll ich das ganz anders durchdenken?

[EDIT]

F: Was ist meine Definition von "Rendering" ist?

A: Der Moment, wenn ein Element im DOM vorhanden und auf dem Bildschirm sichtbar ist, nenne ich es "gerendert". In dem Moment, in dem es nicht im DOM ist, wird es nicht gerendert. Rendering ist der Prozess, der das DOM (und den entsprechenden Bildschirm - wenn das Element sichtbar ist) vom ersten in den zweiten Zustand bringt.

Zufälliger möchte ich nur "ein Ereignis", das zeitlich sehr nahe an den Zeitpunkt ausgelöst wird, wenn ein Element zu rendern beginnt. Ich brauche den Anfang, denn dann möchte ich den Spinner ausschalten. Ich möchte nicht, dass der Spinner gleichzeitig mit meinen Elementen auf dem Bildschirm erscheint.

+0

Werfen Sie einen Blick auf die '.on()' JQuery-Funktion, und Sie passieren den Event-Handler ' 'load'': http://api.jquery.com/on/ –

+0

Können Sie sein spezifischer? Was genau ist Ihre Definition von "Rendering"? Für jedes Element kann es eine andere Definition geben (image/regulary element/animation/transition) – Dekel

+1

Suchen Sie nach [MutationObserver] (https://developer.mozilla.org/en/docs/Web/API/MutationObserver)? – Kaiido

Antwort

1

Was passiert, wenn Sie ein benutzerdefiniertes Ereignis wie hideSpinner auslösen, wenn Sie mit dem Rendern Ihrer Elemente beginnen?

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

+0

Der Code ist ein wenig kompliziert für mich, aber ich ' Ich werde versuchen, genauer zu untersuchen, wie mein Kontext aufgerufen wird (ich habe bereits einen Tag oder so darin verloren), und werde sehen, ob deine Lösung funktioniert. Vielen Dank! –

+0

Wenn es hilfreich wäre, kann ich ein sehr einfaches Beispiel in jsfiddle implementieren – ltamajs

+0

@Itamajs wäre es "zu" hilfreich: D Ich würde mich schlecht fühlen Sie haben zu viel Zeit verbracht, um zu helfen. –

Verwandte Themen