• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] Jquery - Einfacher Content Loader (Preloader)

LikeStar

LikeStar

New member
Hallo Community,

ich möchte einen simplen Preloader bauen.


HTML: 
<div id="overlay"></div>

Div id Overlay, soll die ganze Webseite "überlappen" und einen Background-Color: black haben.
Wenn man die Seite aufruft, ist die Webseite schwarz. Weil ja <div id="overlay"></div> Alles "überlappt".

Langsam lädt der User die Webseite runter. In der Mitte ist zählt eine Prozentzahl bis 100 % nach Abschluss, soll ein fadeOut des divs "Overlay" geschehen. Fertig? Oder?

Wie fange ich an?
Vielen Dank.:eek:
 
Gibt es eine Seite wo das so gemacht wird wie du es haben willst? Dann könnte man es sich dort anschauen.
 
Du hast doch alles selbst beschrieben, was passieren soll?! Fang doch einfach mit einem HTML5-Konstrukt und zwei DIVs darin an - einer heißt "overlay", der andere wie Du magst. Bei DOMready holst dann Deinen Content - und für Deine Prozentzahl kriegst irgendwo bestimmt auch wieder einen unnötigen Ballast rund um JavaScript, was der User erstmal herunterladen darf. Kommt Dein AJAX-Request zurück, nimmst das "overlay" raus - entweder mit oder ohne Effekt (oder gleich wieder 'ne eigene Bibliothek extra dafür laden?). Das isses auch schon ... null Hexenwerk. Have fun!
 
Unverwechselbar, unser Steel :)
Aber Recht hat er. Solche Effekte rufen sehr geteilte Meinungen hervor. Wenn der Content so lange braucht, dass sich ein so umfangreiches Wartebild lohnt stimmt eventuell im Backend etwas nicht.
 
Ja, es tut mir mittlerweile schon selbst leid - ich merke an meinen Postings (wenn ich diese später nochmals lese), wann ich vorher mit meiner Ex-Frau via Telefon gesprochen hab. :D

Um einen User rechtzeitig zu binden (damit er nicht zu lange warten muss), ist dieser "Trick" eigentlich im Zeitalter schon längst vom Tisch. Ich bin mir ziemlich sicher hier in diesem Forum kürzlich einen Link von ... rico?! ... gesehen zu haben, der auf so einen pseudo-loader mit Prozentzahl verwiesen hatte; beim Link bin ich sicher, beim Poster nicht.

Was mich vom TO natürlich interessiert: Was wird da geladen? Handelt es sich um Dinge, die für dieses Projekt "nach außen" essenziell sind oder ist das was für "interna"? Beim "Erstkundenkontakt" (wenn diese ganzen Blink-und-Flacker-Ideen zum Besten geschmettert werden) soll sowas gern auf der Website benutzt werden. Wie sehr sich das aber mit dem wichtigsten Aspekt im Web beißt, erzähle ich Dir danach ...
 
Immer diese unnötigen Unterstellungen

Nein.

1. HTML5 responsive Konstrukt steht und ist validefrei.
2. Content = Inhalt (Die Ganze Webseite soll geladen werden)


Ich mag jetzt keine unnötige Diskussion führen. Die meisten
kostenlosen Preloader bestehen dann aus unzähligen Javascript- und
Stylesheet Dateien. Gimmigs und Spielerein würde ich für mein Projekt
für unnötig halten.

Ich bevorzuge ein einfaches Fadein und FadeOut - > Mit Prozentangabe.
Fertig.

Das Ganze wenn möglich mit jQuery. :D :rolleyes:
 
AW: Immer diese unnötigen Unterstellungen

LikeStar schrieb:
Immer diese unnötigen Unterstellungen.
Zum Vergrößern anklicken....
Gab es von mir keine.

LikeStar schrieb:
validefrei
Zum Vergrößern anklicken....
Nur "valide" - sonst wäre es ja wieder das Gegenteil. :D

LikeStar schrieb:
Ich mag jetzt keine unnötige Diskussion führen.
Zum Vergrößern anklicken....
Ok.

LikeStar schrieb:
Ich bevorzuge ein einfaches Fadein und FadeOut - > Mit Prozentangabe. Fertig. Das Ganze wenn möglich mit jQuery. :D :rolleyes:
Zum Vergrößern anklicken....
Dann suche bitte nach diesem angesprochenen Link - ist noch keine fünf Tage her! Er befindet sich hier im Forum, da so eine Frage bereits gestellt wurde.

Schönes WE.
 
AW: Immer diese unnötigen Unterstellungen

SteelWheel schrieb:
Nur "valide" - sonst wäre es ja wieder das Gegenteil. :D
Zum Vergrößern anklicken....

Ja, das Ganze ist ja irreführend genug.
Eine Webseite als Invalide zu bezeichnen, habe ich selten erlebt.
Du wirst schon wissen, was ich gemeint habe. Du kleiner.... Klug.... ser..

:D

Frei von Programmier-Fehlern.

Und jeden einzelnen Satz zu zitieren und anschließend zu argumentieren, komm schon...
aus diesem Alter sind wir doch längst raus? Oder?
 
Ich hab mir jetzt echt die Mühe gemacht und das Posting gesucht ... das war ein jQ-Plugin (bin ich mir ziemlich sicher).

Den "Klug.... ser.." nehme ich Dir nicht übel. Es war ein wertfreier, freundlicher Hinweis, damit Dir sowas nicht mal in einem Mehraugengespräch (beim Kunden?) unterläuft.

Das Quoting galt der Übersicht - nicht der Einzelsätze.

Das Plugin habe ich für Dich nicht gefunden - aber mehr Anhaltspunkte habe ich auch nicht. Sollte ich es wider Erwarten finden, werde ich es ergänzen.


EDIT: Bei SO hab ich das hier gefunden: klick
 
Zuletzt bearbeitet:
SteelWheel schrieb:
Es war ein wertfreier, freundlicher Hinweis, damit Dir sowas nicht mal in einem Mehraugengespräch (beim Kunden?) unterläuft.
Zum Vergrößern anklicken....

Also mein Kunde wird wohl davon keine Ahnung haben...:congratulatory:

Edit:

Deinen Link habe ich aufgerufen. Code hat jedoch nicht funktioniert.

Habe jetzt selbst einen Loader gebaut und funktioniert wunderbar. Ist demnach erledigt.

CSS
HTML: 
#loader{position: fixed; background-color:black; z-index:9999; background-color:black; background:#4C3C32 url('images/loader.gif') no-repeat center center;}
#loader{width:100%;height:100%; text-align:center;}

HTML
HTML: 
<div id="loader"></div>

JS
HTML: 
jQuery(document).ready(function($) {  

$(window).load(function(){
	$('#loader').delay(2000).fadeOut('slow',function(){$(this).remove();});
  });

});


Sehr simple und genau das was ich oben beschrieben habe.
Schöne Grüße
 
Zuletzt bearbeitet:
AW: Immer diese unnötigen Unterstellungen

LikeStar schrieb:
Du wirst schon wissen, was ich gemeint habe. Du kleiner.... Klug.... ser..

:D
Zum Vergrößern anklicken....
Auch wenn da ein Smilie ist den ich bewußt mit zitiere allgemeine Erinnerung: Leute, bleibt bei der Sache! Es ist nicht nötig und nicht sinnvoll in einem JS Fachforum jemanden persönlich als Klugscheißer zu bezeichnen! Auch nicht mit einem Smilie!
Man kann sich gern in der Sache streiten aber muss nicht persönlich werden!!

*auf gelöst gesetzt*
 
Niemand streitet, Mik. Danke dennoch für die globale Erinnerung.

Wenn ich noch anmerken darf, dass es nicht das als "Lösung" ist, was ursprünglich beschrieben wurde (weder Preloader, noch "progress" [Prozentzahl]), bin ich auch schon hier raus.

Allen einen schönen Sonntag.
 
SteelWheel schrieb:
Wenn ich noch anmerken darf, dass es nicht das als "Lösung" ist, was ursprünglich beschrieben wurde (weder Preloader, noch "progress" [Prozentzahl]), bin ich auch schon hier raus.
Zum Vergrößern anklicken....

Man hätte es auch als Full Page Loader bezeichnen können.

Aber da fehlt die Prozentangabe. Stimmt.

Ajaxload - Ajax loading gif generator
Mit diesem Link kann man sich eine Gif Animation generieren lassen.
Dadurch könnte ich evtl. einen Loader simulieren.

Schöne viele Grüße,
und danke für die Beiträge.
 
Hallo zusammen,

ich bin gerade auch an so einem PreLoader dran, um meine Seite entsprechend darzustellen.
Dieses Beispiel gibt es im Internet sehr oft zu lesen. Sehr simpel und schnell einzubinden.

Bei meinem Projekt funktioniert das leider nicht. Vielleicht kann mir auch jemand sagen, warum das so ist.

Die Seite ist leider nicht im Netz zu finden, weil es in der Firma nur im Intranet vorhanden ist.
Es soll mir eine gewisse Übersicht geben, um meine Arbeit zu erleichtern.

In meinem Code (HTML / PHP / MySQL / MSSQL) werden Daten gesucht und zusammen geführt, was manchmal >10 Sekunden dauern kann.

Das Beispiel oben wird zwar ausgeführt, aber der PreLoader selber erscheint auch erst wenn die Seite geladen wurde. Somit sieht man kurz den Ladehinweis und dann die Seite, natürlich nach dem langen warten.

Ich finde für meinen Fall keine Lösung. Vielleicht ist mein Ansatz auch falsch. Deswegen stelle ich hier diese Fragen.
 
Zuletzt bearbeitet von einem Moderator:
Das Script von oben wird ja mit der neuen Seite geladen und wenn die lange braucht dann wird das ja auch erst spät ausgeführt.
Da wäre ein Script welches beim verlassen der Seite ausgefährt evtl. sinnvoller:
HTML: 
<!DOCTYPE html>
<html lang="de">
<head>
    <title>Overlay next page load</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        div#loading {
            color: red;
            text-align: center;
            width: 200px;
            display: none;
        }
        .ball {
            background-color: rgba(0,0,0,0);
            border: 5px solid rgba(0,183,229,0.9);
            opacity: .9;
            border-top: 5px solid rgba(0,0,0,0);
            border-left: 5px solid rgba(0,0,0,0);
            border-radius: 50px;
            box-shadow: 0 0 35px #2187e7;
            width: 50px;
            height: 50px;
            margin: 0 auto;
            -moz-animation: spin .5s infinite linear;
            -webkit-animation: spin .5s infinite linear;
        }

        .ball1 {
            background-color: rgba(0,0,0,0);
            border: 5px solid rgba(0,183,229,0.9);
            opacity: .9;
            border-top: 5px solid rgba(0,0,0,0);
            border-left: 5px solid rgba(0,0,0,0);
            border-radius: 50px;
            box-shadow: 0 0 15px #2187e7;
            width: 30px;
            height: 30px;
            margin: 0 auto;
            position: relative;
            top: -50px;
            -moz-animation: spinoff .5s infinite linear;
            -webkit-animation: spinoff .5s infinite linear;
        }

        @-moz-keyframes spin {
            0% {
                -moz-transform: rotate(0deg);
            }

            100% {
                -moz-transform: rotate(360deg);
            };
        }

        @-moz-keyframes spinoff {
            0% {
                -moz-transform: rotate(0deg);
            }

            100% {
                -moz-transform: rotate(-360deg);
            };
        }

        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
            };
        }

        @-webkit-keyframes spinoff {
            0% {
                -webkit-transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(-360deg);
            };
        }
    </style>
</head>

<body>
    <button id="button" data-href="http://link-zur-seite">next page</button>
    <br />
    <br />
    <br />
    <div id="loading">
        <div class="ball"></div>
        <div class="ball1"></div>
        <div>L O A D I N G . . .</div>
    </div>
    <script>
    var node = document.getElementById('button');
    node.addEventListener('click', function() {
        document.getElementById('loading').style.display = 'block';
        console.log('button "' + node.innerHTML + '" clicked');
        console.log('url: ' + node.dataset.href);
        window.location.href = node.dataset.href;
    });
    </script>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben