Wie erstelle ich einen jQuery Preloader mit einem Prozentzähler?

Ich habe diesen Code geschrieben, den ich von einem Anfänger jQuery-Buch gelernt habe, das als Preloader für die Seite gut funktioniert, aber wie erstelle ich einen Prozentsatz (%) Zähler dafür? - Basierend darauf, wie viel Körperinhalt geladen ist? Im Moment habe ich nur ein animiertes GIF - aber ich hätte gerne etwas fortgeschritteneres! :)Wie erstelle ich einen jQuery Preloader mit einem Prozentzähler?

// Lets preload! 
$(window).load(function() { 
    $('#preloader').fadeOut('slow', function() { $(this).remove(); }); 
});

CSS:

#preloader { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1000; 
    width: 100%; 
    height: 100%; 
    background: #009933 url(uploads/images/ajax-loader2.gif) center center no-repeat; 
}

Jede Hilfe wäre sehr dankbar!

Danke.

Quelle

2010-11-21 Karlgoldstraw

Was Sie hier tun, ist kein Preloader. Sie zeigen nur ein Bild, bis der Inhalt geladen ist ... –

@Jan - Ja, Sie haben recht, ich versuche, eine Fortschrittsanzeige/Seite anzuzeigen, bis der Inhalt geladen ist und den gleichen Effekt wie ein Preloader hat. Es muss nicht "technisch" ein Preloader sein, sondern nur die Illusion geben, dass die Hauptseite in der Reihenfolge geladen wird, in der sie im Hintergrund ist, ungesehen vom Benutzer, und zeigt dann eine ordentlich geladene Seite, wenn sie fertig ist. – Karlgoldstraw

Hat mir auch geholfen !! :) – KillABug

dieser jQuery plugin könnte helfen.

Quelle

2010-11-21 23:36:20

benutzte ich this plug-in für meine Website ... vielleicht ok, es ist auch für Sie ..

Quelle

2010-11-22 12:42:28

Man könnte vortäuschen, mit so etwas wie dies (für das Beispiel, das ich Bilder verwende):

var percentCounter = 0; 

$.each(arrayOfImageUrls, function(index, value) { 
    $('<img></img>').attr('src', value) //load image 
     .load(function() { 
      percentCounter = (index/arrayOfImageUrls.length) * 100; //set the percentCounter after this image has loaded 
      $('#yourProgressContainer').text(percentCounter + '%'); 
     }); 
});

Quelle

2011-11-10 22:16:00 Johnish

Es zeigt 'Uncaught ReferenceError: ArrayOfImageUrls ist nicht definiert – w3debugger

Wie erstelle ich einen jQuery Preloader mit einem Prozentzähler?

Antwort

Verwandte Themen