Ich habe eine Webseite, auf der ich den Inhalt der Seite ausgeblendet habe, bis das onload JavaScript-Ereignis ausgelöst wurde, und dann blende ich den Inhalt ein. Es funktioniert recht gut unter Chrome, IE11 und IE10. Aber wenn ich IE9 benutze, wird das Verstecken des Inhalts ignoriert. BIS die Seite ist voll geladen, zu welchem Zeitpunkt das Verstecken wirksam wird.
Aufgrund dieses Problems habe ich stattdessen das Verstecken von JavaScript auf CSS umgestellt und immer noch denselben visuellen Effekt. Meine Frage ist also: Wird das CSS erst angewendet, nachdem der HTML-Code vollständig geladen wurde, oder übersehe ich etwas hier? Ein bisschen vom Code hier:
%Vor% %Vor% %Vor%Wie ich schon sagte das Verschwinden des "deaktivieren" div passiert nicht, zumindest bis der jQuery Code seine Arbeit beginnt (das ist zumindest wie es optisch aussieht).
Die ganze Seite, auf der dies geschieht, ist eine Sharepoint-Seite (sharepoint 2013) ... ein Nintex-Formular im View-Modus, um genauer zu sein. Ich bin mir nicht sicher, ob es etwas damit zu tun hat oder ob es etwas mit der Reihenfolge zu tun hat, wie Dinge in IE9 geladen werden. Also meine Frage hier, ob es sein kann, dass die Reihenfolge, wie Dinge in IE9 geladen / verwendet werden, diesen Effekt verursachen könnte?
Als zusätzliche Anmerkung hier: Ich habe bereits überprüft, ob es in der .css zu viele Selektoren gibt, was anscheinend nicht der Fall ist (ich weiß, dass es im IE eine Grenze gibt, für wie viele Selektoren es in einem einzigen Programm funktioniert). CSS-Datei).
Verwenden Sie CSS, um ein Element auszublenden, und verwenden Sie dann JavaScript, um das Element beim Laden der Seite als richtig anzuzeigen. Es sollte wie erwartet in Internet Explorer funktionieren. Das Element sollte zunächst ausgeblendet werden.
Wenn jedoch das Stylesheet mit der #deactivate { display: none; } -Regel innerhalb des Körpers vorhanden ist, beginnt der Browser mit dem Rendern des Inhalts, bis er das Stylesheet aufruft, das anweist, dass der Deaktivierungsblock ausgeblendet werden sollte.
Zweitens erwähnen Sie, dass Sie den Inhalt auf laden anzeigen möchten, aber Ihr jQuery-Code verwendet das Ereignis document.ready, das sich von window.onload unterscheidet und früher ausgelöst wird:
Das DOMContentLoaded-Ereignis wird ausgelöst, wenn das Dokument erstellt wurde vollständig geladen und analysiert, ohne auf Stylesheets, Bilder, und Subframes zum Beenden des Ladens (das Load-Ereignis kann zur Erkennung verwendet werden eine voll geladene Seite). ( Quelle )
Ich würde vorschlagen, diese spezielle CSS-Regel für die besten Ergebnisse einzubinden und das window.load-Ereignis zu verwenden, das wartet, bis alle Ressourcen heruntergeladen sind:
%Vor%Eine saubere und SEO-freundliche Art, mit diesem Problem umzugehen.
Fügen Sie in CSS eine Stilregel wie diese hinzu (Sie können sie spezifischer machen, um nur die Elemente auszublenden, die Sie benötigen, oder andere Eigenschaften verwenden, um sie zu verbergen).
%Vor% Fügen Sie anschließend im HTML-Code, ohne auf document.ready oder onload zu warten, die Klasse loading zum HTML-Element hinzu. Entfernen Sie diese Klasse dann in window.load .
Dadurch wird der Inhalt der Site unsichtbar, bis das load -Ereignis ausgelöst wird. Sie könnten sogar etwas schlaues tun, wie eine CSS3-Lade-Animation.
Als zusätzlichen Bonus bedeutet dies, dass die Website funktioniert, wenn der Nutzer JavaScript deaktiviert hat und SEO möglicherweise verbessern kann.
Skripte in der Fußzeile?
Wenn Sie jQuery / andere Skripts in die Fußzeile laden möchten, können Sie das folgende Skript-Tag einfach in Ihren Header einfügen, um die Ladeklasse ohne jQuery hinzuzufügen.
%Vor%Dann können Sie die Klasse einfach mit jQuery entfernen, wobei Ihre Skripte in die Fußzeile geladen werden.
%Vor% Sie müssen Ihren Code außerhalb von body tag setzen, damit er nach dom und layout (CSS) angewendet wird:
Tags und Links html internet-explorer jquery css internet-explorer-9