<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset='UTF-8'>
<title>Simple Loader</title>
<style>
/* This only works with JavaScript,
if it's not present, don't show loader */
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="https://github.com/Modernizr/Modernizr/raw/master/modernizr.js"></script>
<script>
// Wait for window load
$(window).load(function() {
// Animate loader off screen
$("#loader").animate({
top: -200
}, 1500);
});
</script>
</head>
<body>
<img src="download.png" id="loader">
<img src="//farm6.static.flickr.com/5299/5400751421_55d49b2786_o.jpg">
</body>
</html>Lade-Grafik anzeigen, bis Seite vollständig geladen ist
Chris Coyier am
Danke fürs Teilen….. Tatsächlich suche ich nach genau demselben. Sehr hilfreich für mich….
Scheint wirklich gut, nur; ich würde die
<img src=”download.png” id=”loader”>
zu
<img src=”download.gif” id=”loader”>
Andernfalls wäre es nicht animiert.
Ich habe das Bild geändert, aber es funktioniert immer noch nicht
Habe versucht, einen Weg ohne JavaScript zu finden, aber bis dahin wird Ihre Lösung den Trick machen. Danke.
Gott, das wurde beantwortet, als ich gerade ins College kam.
Codest du immer noch Thomas?? :()
Das scheint mit auf der Seite eingebetteten SWF-Inhalten nicht zu funktionieren.
Wenn Sie hier nachsehen, bleibt das Ladesymbol auch dann sichtbar, wenn der Inhalt vollständig geladen ist. Gibt es eine Möglichkeit, daran zu arbeiten?
Test (online 08/01/2012)
Vielen Dank.. :)
Hallo.. danke für das Tutorial.. Ich habe diesen Loader auf der Startseite angewendet.. und wenn ich zu einer anderen Seite gehe und zurück zur Startseite komme, spielt der Loader wieder. Wie kann ich dafür sorgen, dass der Loader nur einmal funktioniert und nicht, wenn ich von anderen Seiten zurückkomme?
Hallo, zu Ihrer Frage, Sie müssen eine Sitzung erstellen, um abzufangen, wann Ihre Homepage bereits geladen wurde, wie das folgende Beispiel zeigt,
IN PHP FILES WILL BE THE SERVER TYPE
Sehr schön!
Es hilft mir so sehr, danke :D!
Vielen Dank für diesen Schnipsel … Ich verwende ihn in meiner Chrome-Erweiterung für Schriften … ;)
Dieser Schnipsel funktioniert bei mir nicht richtig…
Das Download-GIF-Bild wird nicht richtig geladen….
Hallo, bitte richten Sie den Stil des Bildes ein, wie z. B. width=”50″ height=”50″ oder machen Sie etwas CSS, wenn Sie damit vertraut sind. Wenn Sie ein Beispiel wünschen, PMen Sie mich.
Hallo, genau wie Herr Laksman sagt, der Schnipsel funktioniert wahrscheinlich nicht.
Könnten Sie das bitte überprüfen?
Entfernen Sie .js und .no-js aus dem CSS-Teil. Behalten Sie nur das Folgende bei
Somit funktioniert es …
Funktioniert nicht in Google Chrome.
Hallo, der Link zu modernizr.js scheint defekt zu sein und wie sieht download.png aus? Ich wünschte, es gäbe eine Demo dafür.
Spinner = http://www.ajaxload.info/
Modernizr = http://modernizr.com/
Chris, dein Link ist gut, aber ich denke, du solltest von http://preloaders.net/ wissen. Das ist meiner Meinung nach der beste Preloader-Generator online. ;)
Wie kann ich einen schwarzen Hintergrund anzeigen, während der Loader dreht? Derzeit ist er auf weißem Hintergrund.
@Ebrahim,
Sie könnten
Und dann, sobald die Seite geladen ist
Vergessen Sie nicht die CSS-Stile für die schwarze Klasse
body.black { background-color: black; }Und wenn Sie möchten, dass der Übergang animiert wird, von schwarz zu was auch immer die Hintergrundfarbe nach dem Laden wäre
Danke, aber das funktioniert nicht. siehe Page-Load-Dokumentationen.
Das load-Ereignis wird erst ausgelöst, wenn die Seite vollständig geladen ist. Habe es bereits mit alert(“loading”) getestet.
Verwenden Sie stattdessen diese URL – das funktioniert :)
http://modernizr.com/downloads/modernizr-latest.js
Es funktioniert nicht in Chrome und auch nicht in Safari. Es funktioniert nicht :(
Dies zeigt den Loader an, wenn die Seite mit dem Laden beginnt, aber er wird nie ausgeblendet, nachdem das Laden abgeschlossen ist.
Ich habe es zum Laufen gebracht mit
http://modernizr.com/downloads/modernizr-latest.js
<script>$(window).load(function() {
$("#page").show();
$("#loader").hide();
});
</script>
nach body zeige ich ein Bild
<img src="http://preloaders.net/images/ajax-loader.gif" id="loader">dann ist alles bis zum Ende des body in einem Div mit id=”page”
Auf diese Weise ist bis zum vollständigen Laden der Seite nur eine GIF-Animation sichtbar
Slapul – würdest du bitte den gesamten Code posten, damit wir ihn uns ansehen können? Ich habe Probleme, ihn zu replizieren … Vielen Dank im Voraus!
Danke! Das funktioniert für mich. :-)
Ich habe viele Lösungen ausprobiert, jede funktioniert anders.
Diese hier ist die schnellste. Der vollständige Code wäre
im Kopf hast du
Wenn die Seite vollständig geladen ist, wird das animierte GIF durch das Seiten-Div ersetzt.
Das Pace-Skript funktioniert auch und ist sehr gut anpassbar, aber es ist langsam und wird auch nach dem Laden der Seite angezeigt. Ich verwende dieses, wenn ich mit sehr großen Abfragen arbeite und es passt perfekt.
Wenn jemand eine No-JS-Lösung möchte
zeigt ein Lade-GIF an, bis das Bild geladen ist, und blendet sich aus, während es lädt. Ziemlich einfach, aber ein wenig anders als die JS-Lösung oben.
Funktioniert nicht in Chrome 33. Zeigt nur das
<img>Element an!Sie können pacejs @ http://github.hubspot.com/pace/ verwenden, es ist ein sehr gutes Plugin, einfach zu bedienen und erfordert keine Einrichtung
Mit meiner eigenen Kopie von 'modernizr-latest.js' (Link oben), meiner eigenen Kopie von 'jquery.min.js' und meinem eigenen .gif funktioniert es PERFEKT in IE8, Chrome und Firefox!! Sehr süßer Code!! Ich verlinke nie auf andere Seiten für .js-Dateien. Man weiß nie, wann/ob sie geladen werden :)
Das funktioniert wie am Schnürchen für mich. Einfach, leicht und unkompliziert :)
Ich habe hier ein Problem, der Loader wird über dem Seiteninhalt angezeigt, anstatt auf einem schwarzen Hintergrund angezeigt zu werden, bis die Seite vollständig geladen ist… Was habe ich falsch gemacht?
Hallo,
Dieser Code funktioniert, das Einzige, was Sie ändern müssen, ist
http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.jsund verwenden Sie dies als Ihr Download-Bild
http://sierrafire.cr.usgs.gov/images/loading.gifIch hoffe, das hilft… :)
Ich verwende Modernizer.js noch nicht in meinem Projekt, können Sie mir also bitte sagen, welche Modernizr-Module verwendet werden, um dies zu erreichen, damit ich nicht die gesamte Bibliothek verwende, wenn ein Regal ausreicht?
Danke Mann, das ist so nützlich
Was ist der Sinn von
.jsund.no-js, wenn sie scheinbar überhaupt nicht verwendet werden? Ich bin furchtbar verwirrt.Bitte schicken Sie mir das Skript für eine Diaschau in HTML/CSS
Das direkte Verlinken von Skripten von Github funktioniert in einigen Browsern nicht, da der Content-Type in den Headern nicht richtig ist.
Hey Leute,
Ich arbeite an dieser Website https://storm-braces.herokuapp.com/ und ich frage mich, wie ich das Logo nach der ganzen Animation in die Navigationsleiste bewegen kann (natürlich animiert).
Das habe ich in JS
und das in CSS
Bitte helfen Sie, danke!! :)
Hallo, Sie haben das Beispiel dieses Codes in Aktion.
Ich möchte etwas Ähnliches tun.
Ein GIF, Objekte in ständiger Bewegung, wenn die Seite geladen wird, kommen die Objekte zusammen und bilden das Logo der Seite.
Ich weiß nicht, wie es geht, ich dachte an die Verwendung von zwei GIFs.
Würden Sie mir helfen? Dankbar
/* Loader zentrieren */
#loader {
width: 200px;
margin: 0 auto;
padding-top: 40px;
position: fixed;
align: center;
}
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 0;
animation: dash 2s ease-in-out;
-webkit-animation: dash 2s ease-in-out;
}
.spin {
animation: spin 2s;
-webkit-animation: spin 2s;
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
}
p {
font-family: sans-serif;
color: pink;
font-size: 30px;
font-weight: bold;
margin: 20px auto;
text-align: center;
animation: text .5s linear .4s;
-webkit-animation: text .4s linear .3s;
}
@-webkit-keyframes dash {
0% {
stroke-dashoffset: 1000;
}
100% {
stroke-dashoffset: 0;
}
}
@keyframes dash {
0% {
stroke-dashoffset: 1000;
}
100% {
stroke-dashoffset: 0;
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes text {
0% {
opacity: 0; }
100% {
opacity: 1;
}
@keyframes text {
0% {
opacity: 0; }
100% {
opacity: 1;
}
}
#myDiv {
display: none;
}
Hallo
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 1000);
}
function showPage() {
document.getElementById(“loader”).style.display = “none”;
document.getElementById(“myDiv”).style.display = “block”;
}