Leser Delang hatte Probleme mit dem CSS Seitenlader-Konzept, das ich vor einiger Zeit gepostet habe. Also habe ich eine Beispielseite erstellt. Sie ist sehr einfach und "simuliert" nur das tatsächliche Laden von etwas. Das heißt, es wird nichts wirklich geladen. Sie müssen die Seite neu laden, um sie zurückzusetzen.
Wenn Sie es vorher verpasst haben, der Punkt ist, dass Sie ein DIV erstellen können, das den gesamten Bildschirm weiß überlagert und einen animierten Seitenlader darin anzeigt, wobei seine display-Eigenschaft auf none gesetzt ist.
#page-loader {
position: absolute;
top: 0;
bottom: 0%;
left: 0;
right: 0%;
background-color: white;
z-index: 99;
display: none;
text-align: center;
width: 100%;
padding-top: 25px;
}Dann können Sie die Anzeige dieses DIVs mit einem kleinen Stück JavaScript im onclick-Parameter eines Anker-Elements umschalten.
<a href="#" onclick="javascript:document.getElementById('page-loader').style.display='block';">Click here</a>
ein Seitenlader, der nichts lädt, ist wie ein Auto, in das man einsteigen kann… oder?
Das ist ein schönes Beispiel, aber mit IE6 funktioniert es nicht gut, das DIV deckt nicht die gesamte Seite ab.
Ich mag diese gefälschte Lade-Seite. Aber wenn man den Zurück-Button benutzt, zeigen manche Browser das Lade-DIV ohne Klick an (z.B. Safari). Irgendwelche Ideen, wie man das beheben kann?
@Stefan, wenn das in einem echten Produkt verwendet würde, würde man dieses Problem wahrscheinlich nicht sehen, da der Zurück-Button eine Neuladung der Seite verursachen würde und sie wieder ausgeblendet würde. Das Problem ist jetzt, dass keine neue Seite tatsächlich geladen wird.
Es ist sehr einfach. Ich mag es. Aber ich werde es nicht benutzen. Denn wenn man den Zurück-Button in Firefox benutzt, wird der Lade-DIV ohne Klick angezeigt. Bitte beheben Sie dieses Problem.
Wo platziere ich das Java?
Danke