Chargement d'images et d'effets de page implémentés par jQuery oLoader_jquery

Comment utiliser oLoader

oLoader et oPageLoader sont basés sur jQuery, veuillez donc charger la bibliothèque jquery avant d'appeler. L'auteur a intégré les deux plug-ins ensemble : jquery.oLoader.min.js. Veuillez cliquer sur la source. code à télécharger.
Appeler jQuery oLoader est très simple, comme suit :

Copier le code Le code est le suivant :

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

Utilisez oLoader pour charger des images :

Copier le code Le code est le suivant :

$(fonction(){
$('img').oLoader({
WaitLoad : vrai,
niveau de fondu : 0,9,
Couleur d'arrière-plan : '#fff',
Style :0,
Image : 'loader.gif'
});
});

Chargez la page à l'aide de oLoader :

Copier le code Le code est le suivant :

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

Bien sûr, il offre également une multitude d'options et de fonctions de rappel, qui peuvent être définies en fonction de besoins spécifiques.

Copier le code Le code est le suivant :

{
image : 'images/loader.gif', //Charger des images animées
style : 1, //style du chargeur
modal : true, //Masque modal, s'il est faux, le calque du masque ne sera pas affiché
fadeInTime : 300, //Vitesse de fondu du calque de masque, millisecondes
fadeOutTime : 300, // Vitesse de fondu du calque de masque, millisecondes
fadeLevel : 0,7, //Transparence du calque de masque, 0-1
backgroundColor : '#000', //Couleur d'arrière-plan
imageBgColor : '#fff', //chargeur d'arrière-plan de l'image animée
imagePadding : '10',
showOnInit : true, //Initialiser l'animation de chargement de l'affichage
hideAfter : 0, //temps en ms
url : false, //Paramètres d'appel Ajax, les mêmes ci-dessous
Tapez : 'OBTENIR',
données : fausses,
updateContent : true, //S'il faut remplacer le contenu renvoyé par ajax
updateOnComplete : true,//S'il faut remplacer immédiatement le contenu renvoyé par le serveur
showLoader : true, //S'il faut afficher l'image du chargeur
Effet : '', //Effet dynamique, supporte porte, toboggan, doornslide
WholeWindow : false, //quand c'est vrai, oLoader couvre toute la fenêtre
lockOverflow : false, //verrouille le débordement du corps pendant le chargement
waitLoad : false, //Afficher le contenu lorsque le contenu de l'élément est chargé
checkIntervalTime : 100, //intervalle qui vérifie les changements de position
//Fonction de rappel
complete: '', //Appelle lorsque l'animation se termine et que le contenu est chargé
onStart : '', //Appelé lorsque l'animation démarre
onError : '' //Appelé lorsqu'une erreur de requête ajax se produit
}
Comment utiliser oPageLoader
oPageLoader peut réaliser une belle animation de barre de progression lors du chargement de la page. L'appel de oPageLoader est également très simple, comme suit :
. $(fonction(){
$.oPageLoader();
});
oPageLoader fournit une multitude d'options et d'appels de méthodes.
{
backgroundColor : '#000', //Couleur d'arrière-plan
progressBarColor : '#f00', //Couleur de la barre de progression
progressBarHeight : 3, //Hauteur de la barre de progression
progressBarFadeLevel : 1,
showPercentage : vrai,
pourcentageCouleur : '#fff',
pourcentageFontSize : '30px',
contexte : 'corps',
Éléments affectés : 'img, iframe, frame, script',
ownStyle : false, //Si défini sur true, le style de la barre de progression peut être personnalisé
style : "

0%

",
lockOverflow : vrai,
images : [], //tableau d'images supplémentaires, telles que celles provenant de fichiers CSS
WholeWindow : vrai,
fadeLevel : 1,
waitAfterEnd : 0,
fadeOutTime : 500,
//rappels
complete: false, //Exécuter lorsque la page est chargée et que l'animation se termine
completeLoad : false, //Exécuter lorsque la page a été chargée et ne nécessite pas la fin de l'animation
mise à jour : faux
}

回呼函數update，是當頁面元素載入完時調用，返回data資料為：
data.total：載入的元素總數。
data.loaded：已載入的元素。
data.percentage：百分比。
使用方法：

複製程式碼 程式碼如下:

$.oPageLoader({
  update: function(data) {
    //here you can work
    //with data.percentage
    //     data.loaded
    //     data.total          
  }
});

以上就是本文跟大家分享的jQuery oLoader插件的使用方法，希望大家能夠喜歡。