Preloader mit CSS/JavaScript

vmd · 24.07.2013

Hallo,

habe noch eine Frage, und zwar habe ich diesen Preloader für die gesamte index.html

<script type="text/javascript">
//<![CDATA[
$(window).load(function() { // ladet Inahlt
$("#status").fadeOut("slow"); // Ausblenden
$("#status_logo").fadeOut("slow");
$("#preloader").delay(100).fadeOut(2000); // Preloader Ausblenden

})
//]]>
</script>

Momentan ist in der #status eine gif die sich ständig mit 20fps bewegt.
Ich möchte aber eine <hr> die mit 100% ladestatus dann ca 200px lang wird. Mit 0% ist die <hr> 0px lang.

Wie heisst der JavaScript dazu?

LG

yezinia · 25.07.2013

AW: Preloader mit CSS/JavaScript

Offensichtlich benutzt du jQuery

guck dir in der Dokumentation von jQuery doch einfach mal

.animate()

an. Da dürfte drin sein, was du suchst.

Jedoch wird das nicht funktionieren, da das Skript ja erst ausgeführt wird, wenn alles fertig geladen ist.

Code:

$(window).load()

Wird nicht ausgeführt, solange der Inhält lädt, sondern sobald der Inhalt komplett geladen ist.
Was du vor hast ist also nur Teilweise möglich und zwar eigentlich nur für Bilder, das KÖNNTE dann so aussehen:

Code:

$(document).ready(function(){ // wird ausgefuehrt, sobald das DOM geruest geladen ist. Also praktisch das reine HTML

    var allImages = $(img).size(); // anzahl aller Bilder im Dokument
    var loadedImages = 0; // anzahl bereits geladener Bilder
    var percentage; // Prozentualer anteil an geladenen Bildern 
    var maxWidth = 200; // maximale Breite eines Fortschrittbalkens (also die breite bei 100%)
    var actualWidth; // akuelle Breite des Fortschrittbalkens

    $(img).each(function(){ // jedes bild erfassen
        $(this).on('load', function(){ // jedem Bild den Eventhandler load abfragen
            loadedImages = loadedImages + 1; // geladene Bilder um 1 erhoehen
            percentage = math.round( (loadedImages / allImages) * 100)/100; // prozentualer anteil berechnen und auf 2 stellen runden
            actualWidth = maxWidth * percentage; // aktuelle breite des balkens berechnen
            $("#status").css({
                'width':actualWidth+'px' // breite des Balkens auch wirklich ändern
            });
        });
    });
});

/* fertsch */

hab mir das gerade aus meinen Fingern gesaugt, also übernehme ich keine Garantie, dass es fehlerfrei ist.