Skriptdatei zuerst laden, divs vor Laden ausführen

Ich habe also einige Animationen, die passieren müssen, bevor der Seiteninhalt angezeigt wird.Skriptdatei zuerst laden, divs vor Laden ausführen

Ich verwende JS, um die divs, die ich beim Laden mit einer Animation angezeigt werden soll, zu verbergen, aber da die Skriptdatei nach dem HTML aufgerufen wird, erscheinen die divs, verschwinden, wenn der JS passiert, und erscheinen dann wieder mit der Animation.

Mein Problem ist, dass, wenn ich die Skriptdatei am Anfang, das Verstecken nicht geschieht, wahrscheinlich weil die divs, die es zielt, noch nicht existieren.

Gibt es eine Möglichkeit, dass ich die jQuery-Datei zuerst laden und dann die divs verstecken kann, sobald sie existieren, aber bevor sie fertig geladen sind?

PS: Wenn ich CSS benutze, um die divs zu verbergen, wird es nicht funktionieren, wenn Javascript deaktiviert ist, was ein Problem ist, und wenn ich nur JS verwende, um Klassen zu wechseln, habe ich das gleiche Problem mit der Verzögerung, und es sieht glitchy ...

Quelle

2016-09-21 Suzanne Edelman Creoconcept

Können Sie das nicht mit CSS-Animationen animieren? Bitte auch ein [Mvce] (http://stackoverflow.com/help/mcve) –

@BobBrinks nein, ich benutze dies als ein Beispiel, aber ich brauche das auch für andere Dinge und diejenigen, die ich nicht verwenden kann CSS zum. –

Wie Sie darauf hinweisen, haben Sie einen Kompromiss. Sie sollten es entweder "richtig" machen, d. h. Elemente werden standardmäßig für Nicht-js-Benutzer angezeigt und dann für js-Benutzer ausgeblendet (und nicht umgekehrt). Oder Sie müssen die nicht-js Benutzer verlassen, wenn Sie eine wirklich saubere und glatte Erfahrung wollen. Wir müssen Ihren Code sehen, um zu helfen. – lharby

mit der Technik here von I.devries gegeben, können Sie den CSS-Stil mit JavaScript-Code in einem Skriptblock hinzufügen, die Sie an der Spitze der HTML-Datei einfügen können:

<script type="text/javascript"> 
    var style = document.createElement('style'); 
    style.type = 'text/css'; 
    style.innerHTML = '.hiddenDiv { display: none; }'; 
    document.getElementsByTagName('head')[0].appendChild(style); 
</script>

Durch Anwenden der Klasse auf die Divs werden sie ausgeblendet, sobald sie geladen werden:

<div class="hiddenDiv" ... ></div>

Wenn Javascript deaktiviert ist, wird der Stil nicht hinzugefügt und die divs werden angezeigt.

Quelle

2016-09-21 16:26:19 ConnorsFan

Skriptdatei zuerst laden, divs vor Laden ausführen

Antwort

Verwandte Themen