Laden von Bildern und Seiteneffekten, implementiert durch jQuery oLoader_jquery

So verwenden Sie oLoader

Sowohl oLoader als auch oPageLoader basieren auf jQuery. Laden Sie daher vor dem Aufruf die beiden Plug-Ins zusammen: jquery.oLoader.min.js. Bitte klicken Sie auf die Quelle Code zum Herunterladen.
Der Aufruf von jQuery oLoader ist ganz einfach wie folgt:

Code kopieren Der Code lautet wie folgt:

$('#element').oLoader();

Verwenden Sie oLoader, um Bilder zu laden:

Code kopieren Der Code lautet wie folgt:

$(function(){
$('img').oLoader({
WaitLoad: wahr,
fadeLevel: 0,9,
Hintergrundfarbe: '#fff',
Stil:0,
Bild: 'loader.gif'
});
});

Laden Sie die Seite mit oLoader:

Code kopieren Der Code lautet wie folgt:

$('#ajax').oLoader({
URL: 'test.html',
updateOnComplete: false
});

Selbstverständlich stehen auch zahlreiche Optionen und Rückruffunktionen zur Verfügung, die je nach Bedarf eingestellt werden können.

Code kopieren Der Code lautet wie folgt:

{
image: 'images/loader.gif', //Animierte Bilder laden
Stil: 1, //Loader-Stil
modal: true, // Modale Maske. Wenn sie falsch ist, wird die Maskenebene nicht angezeigt
fadeInTime: 300, // Einblendgeschwindigkeit der Maskenebene, Millisekunden
fadeOutTime: 300, // Ausblendgeschwindigkeit der Maskenebene, Millisekunden
fadeLevel: 0.7, //Transparenz der Maskenebene, 0-1
backgroundColor: '#000', //Hintergrundfarbe
imageBgColor: '#fff', //loader animierter Bildhintergrund
imagePadding: '10',
showOnInit: true, //Animation zum Laden der Anzeige initialisieren
hideAfter: 0, //Zeit in ms
URL: false, //Ajax-Aufrufparameter, das gleiche unten
Geben Sie ein: 'GET',
Daten: falsch,
updateContent: true, //Ob der von Ajax
zurückgegebene Inhalt ersetzt werden soll updateOnComplete: true,//Ob der vom Server zurückgegebene Inhalt sofort ersetzt werden soll
showLoader: true, //Ob das Loader-Bild angezeigt werden soll
Effekt: '', //Dynamischer Effekt, unterstützt Tür, Rutsche, Türrutsche
WholeWindow: false, // wenn true, deckt oLoader das gesamte Fenster ab
lockOverflow: false, // sperrt den Überlauf des Körpers beim Laden von
waitLoad: false, //Zeigt den Inhalt an, wenn der Elementinhalt geladen wird
checkIntervalTime: 100, //Intervall, das auf Positionsänderungen prüft
//Rückruffunktion
Complete: '', //Aufruf, wenn die Animation endet und der Inhalt geladen wird
onStart: '', //Wird aufgerufen, wenn die Animation startet
onError: '' //Wird aufgerufen, wenn ein Ajax-Anfragefehler auftritt
}
So verwenden Sie oPageLoader
oPageLoader kann beim Laden der Seite eine schöne Fortschrittsbalkenanimation realisieren. Der Aufruf von oPageLoader ist ebenfalls sehr einfach:
$(function(){
$.oPageLoader();
});
oPageLoader bietet eine Fülle von Optionen und Methodenaufrufen.
{
backgroundColor: '#000', //Hintergrundfarbe
progressBarColor: '#f00', //Farbe des Fortschrittsbalkens
progressBarHeight: 3, //Höhe des Fortschrittsbalkens
progressBarFadeLevel: 1,
showPercentage: true,
ProzentsatzFarbe: '#fff',
ProzentsatzFontSize: '30px',
Kontext: 'Körper',
AffectElements: 'img,iframe,frame,script',
ownStyle: false, //Wenn auf true gesetzt, kann der Stil des Fortschrittsbalkens angepasst werden
Stil: "

0%

",
lockOverflow: true,
Bilder: [], //Array zusätzlicher Bilder, beispielsweise aus CSS-Dateien
WholeWindow: wahr,
fadeLevel: 1,
waitAfterEnd: 0,
fadeOutTime: 500,
//Rückrufe
komplett: false, //Ausführen, wenn die Seite geladen wird und die Animation endet
CompleteLoad: false, //Ausführen, wenn die Seite geladen wurde und kein Ende der Animation erforderlich ist
Update: falsch
}

La fonction de rappel update est appelée lorsque les éléments de la page sont chargés. Les données renvoyées sont :
data.total : nombre total d'éléments chargés.
data.loaded : élément chargé.
data.percentage : pourcentage.
Comment utiliser :

Copier le code Le code est le suivant :

$.oPageLoader({
mise à jour : fonction (données) {
//ici tu peux travailler
//avec data.percentage
// // data.loaded
// data.total
}
});

Ce qui précède explique comment utiliser le plug-in jQuery oLoader partagé avec vous dans cet article. J'espère que vous l'aimerez.