Comment créer un préchargeur GIF avec un délai. Nous créons un préchargeur JS à part entière pour une application AJAX. Étapes de création d'un préchargeur
Créer des préchargeurs est devenu très à la mode, car ils sont beaux et, surtout, ils obligent l'utilisateur à ne pas quitter le site pendant son chargement.
Comment créer un préchargeur pour un site Web ?Le préchargeur lui-même peut être réalisé en quelques secondes seulement si vous utilisez des solutions toutes faites, ou en quelques minutes si vous écrivez tout vous-même à partir de zéro :)
Mais prenons les choses dans l'ordre...
L’essence même du navigateur est qu’il affiche le code étape par étape. Cela signifie que le navigateur parcourt tout le code de haut en bas, et si quelque part au milieu du code il rencontre des scripts JS lourds, le site se bloquera un peu à ce stade.
Preloader fait en sorte que nous masquions tout le contenu du site et l'affichions complètement uniquement lorsque l'ensemble du site est chargé avec tous les scripts et styles.
Bref schéma du fonctionnement du préchargeur :
- Littéralement immédiatement après la balise body d'ouverture, nous plaçons un div avec un préchargeur ;
- Activez le préchargeur et masquez tout le contenu de la page ;
- Après avoir chargé la page, supprimez le préchargeur et affichez le site.
Regardons maintenant le code. Au départ, vous devez placer un div avec un préchargeur, quelque chose comme ceci :
AreaForLoader (arrière-plan : dégradé linéaire (90 degrés, #FF4E50 10 %, #F9D423 90 %); débordement : caché ; position : fixe ; gauche : 0 ; haut : 0 ; droite : 0 ; bas : 0 ; z-index : 9999 ; )
La dernière chose que vous devez faire est de masquer le préchargeur. Pour ce faire, vous pouvez utiliser le code jQuery suivant :
$(window).on("load", function () ( $preloader = $(".loaderArea"), $loader = $preloader.find(".loader"); $loader.fadeOut(); $preloader. delay(350).fadeOut("lent"); ));
En gros, tout ce que vous avez à faire est d’ajouter une belle animation à vos préchargeurs. J'ai également trouvé quelques exemples intéressants de préchargeurs, vous voudrez peut-être les consulter :
Créer un préchargeur à l'aide de pluginsIl existe également d'autres façons de créer des préchargeurs et des barres de chargement. Par exemple, vous pouvez utiliser le plugin spécial NProgress.js pour créer une belle barre de chargement, ou utiliser le concepteur de préchargement.
Ces deux choses sont parfaitement décrites dans le tutoriel vidéo sur la création d'un préchargeur, je vous conseille donc de regarder ce tutoriel vidéo :
Préchargeur $(document).ready(function () ( NProgress.start (); NProgress.set (0.4); setTimeout(function () ( NProgress.done (); ), 4000); )); #hellopreloader>p(affichage:aucun;)#hellopreloader_preload(affichage: bloc;position: fixe;z-index: 99999;haut: 0;gauche: 0;largeur: 100%;hauteur: 100%;min-largeur: 1000px ;arrière-plan : #E4F1FE url(http://hello-site.ru//main/images/preloads/circles.svg) centre centre sans répétition;background-size:131px;)
Bonjour-Site.ru. Créateur de site Web gratuit.
var hellopreloader = document.getElementById("hellopreloader_preload");function fadeOutnojquery(el)(el.style.opacity = 1;var interhellopreloader = setInterval(function())(el.style.opacity = el.style.opacity - 0,05; si (el.style.opacity2. Créez des styles CSS pour le bloc div et l'élément i (icône).
#avant-chargement ( position : fixe; /*position fixe du bloc*/ gauche : 0; /*position de l'élément à gauche*/ haut : 0; /*position de l'élément en haut*/ droite : 0 ; /*position de l'élément à droite*/ bottom : 0; /*position de l'élément en bas*/ background: #fff; /*couleur du fond du bloc*/ z-index: 1001; / *placez-le au-dessus de tous les éléments de la page*/ ) #before-load i ( font-size : 70px; /*icon size*/ position: absolue; /*position absolue, positionnée par rapport à son ancêtre le plus proche*/ left: 50 %; /*gauche 50% de la largeur du bloc parent*/ top: 50%; /*top 50 % de la hauteur du bloc parent*/ margin: -35px 0 0 -35px; /*décaler l'icône de manière à qu'il est centré*/ ) 3. Ajoutez un script qui masque le préchargeur après le chargement de la page (c'est-à-dire lorsque l'objet window se charge) : $(window).load(function() ( $("#before-load"). find("i").fadeOut().end().delay(400).fadeOut("lent"); ));
Si vous souhaitez utiliser une image GIF animée comme indicateur de préchargement, vous devez apporter les modifications suivantes aux étapes ci-dessus :
Supprimez les classes Font Awesome du code HTML :
Apportez les modifications suivantes aux styles CSS (modifiez la règle #before-load i (..)) :
#avant de charger i ( largeur : 70 px ; /*largeur de l'image gif*/ hauteur : 70 px; /*hauteur de l'image gif*/ position : absolue ; gauche : 50 % ; haut : 50 % ; arrière-plan : url( "assets /images/img.gif") non-répétition 50% 50%; /*emplacement (url) de l'image gif et autres paramètres*/ margin: -35px 0 0 -35px; )
Vous pouvez télécharger des images GIF animées pour votre site Web à partir de la ressource http://preloaders.net/ ou utiliser cette archive.
L’utilisation ou non d’un préchargeur sur un site Web est une question individuelle. Par exemple, pour un site Web d’une page avec un minimum de graphiques et d’images, une telle chose n’est pas nécessaire.
Considérons l'autre extrême : un site Web pour commander des pizzas. La plupart des visiteurs commandent une pizza à partir d'un téléphone mobile, ce qui signifie en principe une vitesse de chargement du site plus lente et plus de photos. Un préchargeur pour de tels sites sera très utile : les visiteurs ne verront pas le processus inesthétique de formation des pages.
Nous allons maintenant créer un préchargeur rotatif classique en CSS pur en utilisant les propriétés d'animation.
Créons un code HTML simple composé d'une balise div vide avec la classe loader, sans compter la balise body bien sûr.
Nous écrirons tout le reste du code dans le fichier styles. Le début rappellera un cours de géométrie à l'école : apprendre à connaître les formes.
Styles pour la classe de chargeurTout d’abord, dessinez un carré gris avec une ligne continue de 2 pixels d’épaisseur :
Chargeur (
bordure : 2px solide #eae4ea ;
}
avec une largeur et une hauteur de 150 pixels :
Chargeur (
largeur : 150 px ;
hauteur : 150px ;
}
Avec une seule ligne de code, le carré est devenu un cercle :
Rayon limite : 50 % ;
Créez une ombre translucide pour le cercle :
Box-shadow : 0 -2px 2px rgba(0,0,0,.2);
Et peignons le cadre inférieur en vert :
Bordure inférieure : 2px solide #6ddfca ;
Trouvons notre propre nom pour l'animation ; le cercle fera un tour complet uniformément en 3 secondes, tournant sans fin jusqu'à ce que la page se charge.
Animation : chargeur 3s linéaire infini ;
Un cercle c'est bien, mais trois cercles c'est mieux, d'autant plus que deux d'entre eux seront « faux » - uniquement dans les styles, puisque les pseudo-éléments offrent cette opportunité.
Dessinez un pseudo-cercle interne avant l'intérieur du cercle réel, de 20 pixels (10px+10px) de diamètre plus petit
Chargeur :avant (
contenu: "";
position : absolue ;
haut : 10px ;
gauche : 10px ;
en bas : 10 px ;
à droite : 10px ;
}
avec un cadre inférieur rose et il tournera plus vite que le cercle principal.
Chargeur :avant (
bordure inférieure : 2px solide #d355be ;
animation : chargeur 2s linéaire infini ;
}
Maintenant c'est au tour du cercle arrière, bien qu'il soit le plus petit, il est le plus rapide, en 1 seconde il fera un tour complet et il a une belle bande violette.
Chargeur : après (
bordure inférieure : 2px solide #8c23ec ;
animation : chargeur 1s linéaire infini ;
}
L'indentation du cercle arrière par rapport au cercle principal est de 22 pixels.
Haut : 22 px ;
gauche : 22px ;
bas : 22px ;
à droite : 22 px ;
Il est temps de commencer nos cercles, cela se fait par la propriété transform:rotate - ce qui signifie rotation. 0 % est le début et 100 % est la fin. Chaque cercle tournera à 360 degrés.
De nombreux programmeurs optimisent le code JavaScript et CSS pour accélérer le chargement de la page.
Mais tous ne proposent pas de préchargeurs, qui donnent à l'utilisateur l'effet d'un chargement subjectivement plus rapide.
Méthode numéro 1. Pas cher et joyeux.
L'idée est simple : vous devez placer une image au centre qui montrera à l'utilisateur que la page est toujours en cours de chargement. Le code est assez simple, on écrit juste après :
De ce fait, immédiatement après le chargement, un bloc apparaît avec une barre de progression animée au centre de la page. Le paramètre de débordement doit être modifié afin qu'une barre de défilement n'apparaisse pas et que l'utilisateur ne puisse pas faire défiler vers le bas et consulter le contenu de la page.
Ensuite, lorsque tout est chargé, vous devez supprimer le préchargeur et définir le débordement sur visible.
J'ai placé cette partie du code dans un fichier avec les fonctions JS, plreloader1.js
Si vous créez une barre de progression à partir d'une image GIF animée, elle peut s'avérer trop lourde, parfois même plus grande que la page elle-même sur laquelle elle est placée.
Par conséquent, il est préférable de dessiner une bande (par exemple, comme celle-ci), de la mettre comme arrière-plan du bloc avec préchargeur d'ID et de déplacer la position de l'arrière-plan en fonction de la minuterie.
Et après le chargement, nous faisons ceci :
Le résultat du travail est visible.
Cette méthode présente des inconvénients - Si vous définissez le masquage du préchargeur sur onload, c'est-à-dire lorsque vous attendez que toutes les images soient chargées, l'utilisateur peut penser que la page est simplement gelée - en fait, rien ne se passe à part l'animation. Si vous l'accrochez à $(document).ready() de jQuery, après la disparition du préchargeur, les images seront uniquement chargées.
Il est donc suggéré d'utiliser...
Méthode numéro 2. La vérité est là, ou les Jedi ripostent.
Tout d'abord, dessinons 2 barres de chargement - actives et peu actives.
Définissons l'inactif comme arrière-plan et faisons de l'actif l'arrière-plan du div, dont nous modifierons la largeur en fonction du pourcentage de charge.
Progbar_ph.gif est une image de 1 pixel de haut et de la largeur de notre barre de défilement (cet exemple est bogué sans cela dans IE, et je n'ai pas encore trouvé d'autre moyen de centrer les divs de la barre de progression).
Les styles sont les mêmes que dans la méthode précédente, sauf que
Il ne reste plus qu'à créer un petit script qui chargera dynamiquement le contenu et les images du site. Il est nécessaire pour que la barre de progression soit affichée et modifiée avant même que le framework utilisé et les autres fichiers JS ne soient téléchargés.
Prenons un site Web moyen entièrement réalisé en AJAX. Le chargement se déroule grosso modo comme ceci :
- Le code HTML est en cours de chargement
- les photos commencent à charger
- puis un cadre
- fichiers JS supplémentaires (bien qu'il soit préférable de tout fusionner en un seul)
- une certaine fonction (ou plusieurs) est lancée et extrait du contenu supplémentaire.
J'ai implémenté 2 méthodes - la première est simple, elle s'allume comme ceci :
juste avant d'écrire :
dLoader.start("progbarfg" , 333, "count" );
Le premier paramètre est l'identifiant du bloc avec la barre de chargement active comme arrière-plan, le deuxième est la largeur de l'image, le troisième paramètre est la méthode par laquelle nous calculerons le poids du contenu.
Le script scanne toutes les images sur les pages et leur attribue un poids de 1. Tous les fichiers JS sont écrits dans son corps, comme je vous le dirai ci-dessous.
Cependant, j'aimerais que le poids de chaque élément de contenu ne soit pas un seul, mais un volume réel en octets. Et pour les applications AJAX, j'aimerais charger tous les graphiques en même temps.
Pour ce faire, j'ai écrit un script en PHP qui analyse un dossier contenant des images de conception et place le tout avec la taille des fichiers dans un tableau, en le compressant éventuellement.
Ainsi, en ajoutant ce qui suit devant nous, nous obtiendrons une barre de progression qui montrera la progression du chargement de tout le contenu sur la page, après quoi elle disparaîtra en douceur.
Lorsque tous les fichiers JS ont été chargés, les fonctions qui se trouvent dans le tableau d'invocation sont lancées. Si nous chargeons du contenu en utilisant jQuery, la fonction ressemblera à ceci :
Le script PHP fait ce qui suit : il saisit les scripts nécessaires avec leurs tailles, ainsi que les images et fonctions supplémentaires dans un tableau. Code:
Une fois toutes les images et fichiers JS chargés, l'événement onLoad est appelé, que vous avez spécifié dans la fonction dLoader.start()
Il existe également un moyen de personnaliser le processus de chargement.
Dans cette leçon, nous verrons comment déterminer le pourcentage de chargement du préchargeur avec les éléments de la page. Ici, nous allons travailler avec jQuery, nous familiariser avec ses méthodes, apprendre comment fonctionnent les cycles et créer notre propre fonction qui effectuera certaines actions.
Étapes de création d'un préchargeurObtenons le nombre total d'images sur la page, découvrons le pourcentage, combien est alloué à chaque image, remplissons la barre de progression en boucle jusqu'à ce que toutes les images apparaissent sur la page et finalement, avec un chargement à 100 %, montrons l'intégralité page et masquer le préchargeur.
Ce sera le concept général de ce script.
Transférons tous les fichiers vers notre environnement de développement, lançons Index, ouvrons la console du navigateur et voyons comment les images sont chargées, avec et sans la mise en cache activée.
Lorsque la mise en cache est désactivée, nous recevons des images, mais la barre de progression fonctionne toujours. Si nous faisons du throttling sur la 3G, alors tout change ici, les images ne sont pas encore toutes chargées, mais la barre de progression est pleine à 100% et attend que la page se charge.
La raison en est le temps de chargement du préchargeur et le pourcentage que nous définissons manuellement ; nous devons travailler avec ces paramètres.
Puisque nous allons changer la logique du script, nous n'avons pas besoin de l'appeler en bas, car la barre de progression doit maintenant être chargée en premier, nous déplaçons toute la connexion des fichiers vers la tête.
Initialisation des variables
Nous revenons au script et initialisons plusieurs variables en haut.
Nous déplaçons la variable preloader = $("#preloader") tout en haut, à l'aide de laquelle nous masquons cet identifiant. Nous l'utiliserons un peu plus tard.
Preloader = $("#preloader"), // sélecteur de préchargement
Le reste du code peut être commenté ou supprimé ; nous n’en aurons plus besoin.
// $(window).on("load", function () ( // $preloader.delay(1800).fadeOut("lent"); // ));
Nous utilisons la bibliothèque jQuery pour accéder aux objets image. Utilisons la fonction length pour connaître le nombre d'images sur la page et plaçons le résultat obtenu dans la variable imagesCount.
ImagesCount = $("img").length, // nombre d'images
Ci-dessous, nous vérifierons et afficherons ce résultat dans la console.
Console.log(imagesCount);
Et ainsi, nous savons maintenant combien d’images graphiques sont présentes sur la page. Ensuite, vous pouvez calculer le nombre de pourcentages alloués à une image.
Nous divisons 100 par le nombre d'images et mettons le résultat obtenu dans une variable. Pour vérifier, nous l'afficherons immédiatement dans la console.
Pourcentage = 100 / imagesCount ; //montant % par image console.log(percent);
Nous connaissons maintenant le paramètre de pourcentage de chargement, la progression que nous devons réaliser lors de l'exécution du script et le pourcentage alloué à chaque image.
Lors de l'appel de la fonction dans les paramètres, placez 100, nous enregistrons une variable avec le nombre de pourcentages par image et modifions la vitesse de chargement à 1000 afin que la barre de progression charge plus rapidement les pourcentages initiaux.
)).circularProgress("animer", pourcentage, 1000);
Clonage d'images en boucleMaintenant, la tâche suivante est de créer une copie de chaque image, où avec chaque clone nous appelons la fonction de lancement de la barre de progression, et pendant l'appel, nous lançons la barre de progression, dans laquelle nous chargeons le pourcentage qui lui est alloué sur chaque image , remplissant ainsi complètement la progression jusqu'au point final.
Pour ce faire, on crée une boucle, où I est une variable compteur, puis on écrit une condition, tant que I est inférieur au nombre d'images, on augmentera le compteur d'un var i = 0 ; je< imagesCount; i++ , и в скобках выполнять следующие действия.
Nous créons une variable dans laquelle nous plaçons une instance de l'objet Image (c'est-à-dire une image), puis nous faisons une copie de src .
Le navigateur permet de suivre le chargement des ressources externes - scripts, images à l'aide d'un événement - si une erreur survient lors du chargement.
La ligne suivante appelle la fonction en utilisant l'événement onload, dans lequel lancer la barre de progression ; nous la décrirons un peu plus tard.
Et sur la deuxième ligne, nous appelons l'événement onerror, si soudainement une erreur se produit : l'image ne s'est pas chargée.
Pour (var je = 0; je< imagesCount; i++){ // создаем клон изображений var img_copy = new Image(); img_copy.src = document.images[i].src; img_copy.onload = img_load; img_copy.onerror = img_load; }
Ci-dessous, nous décrivons une fonction qui lance le préchargeur et ajoute un pourcentage, écrivez la fonction img_load() à l'intérieur pour ajouter le pourcentage que nous connaissons à la progression du chargement. Pour ce faire, créez une autre variable avec une valeur nulle, appelez-la progression.
Progrès = 0 ; // point de départ
Et puis nous créons une autre variable appelée LoadImg avec une valeur nulle. Ce sera également un compteur par lequel on comparera le nombre d'images clonées.
LoadedImg = 0, // compteur de chargement d'image
On revient à la fonction, on fait les ajouts progress += pour cent dans le ragondin, et on sauvegarde le résultat en cours . Dans la deuxième ligne, nous augmentons le compteurloadImg++ de un.
Ensuite, nous écrivons une condition, si la progression est supérieure ou égale à 100 (où 100 est le nombre total de pour cent) ou si le compteurloadImg est égal au nombre d'images chargées imagesCount , alors vous pouvez supprimer la barre de progression preloader.delay (400).fadeOut("lent"); , sinon nous appelons la barre de progression, où nous augmentons la progression et réduisons la vitesse de chargement à 500.
Fonction img_load() ( progress += percent;loadImg++; if (progress >= 100 || LoadImg == imagesCount)( preloader.delay(400).fadeOut("slow"); qBody.css("overflow", "" ); ) $(".dws-progress-bar").circularProgress("animate", progrès, 500); )
À l'aide de la console, vérifions comment les nouveaux objets image sont créés.
Console.log(img_copy); console.log(img_copy.src);
Nous voyons que cinq clones d'images ont été créés avec succès, chacun a un lien, il n'y a aucune erreur, la fonction est traitée avec succès.
Supprimer un préchargeurSupprimons maintenant le défilement droit vers le bas, de sorte que lors du chargement du préchargeur, nous ne puissions pas faire défiler la page, comme nous le faisons maintenant.
Pour ce faire, nous allons tout envelopper dans une condition : si le nombre d'images est supérieur à zéro imagesCount > 0 alors nous exécuterons ce script, sinon nous supprimerons le préchargeur preloader.remove(); . Si la condition est remplie, ajoutez un fond noir au préchargeur preloader.css("background", "#000"); , et en CSS nous supprimerons ce style.
Si (imagesCount >= imgSum && imagesCount > 0) ( preloader.css("background", "#000"); ) else ( preloader.remove(); )
Nous initialisons une autre variable dans laquelle nous plaçons le sélecteur qBody = $("body") , et dans la condition nous spécifions un verrou de défilement pour le sélecteur de corps qBody.css("overflow", "hidden"); .
QBody.css("débordement", "caché");
Maintenant, nous devons débloquer le défilement, pour cela, lorsque nous supprimons le préchargeur, puis pour le corps, nous effaçons le blocage qBody.css("overflow", ""); .
QBody.css("débordement", "");
Nous supprimons les informations de service affichées dans la console et les enregistrons.
En principe, le préchargeur est prêt, mais il ne nous sera pas toujours intéressant de le lancer avec une ou deux images sur la page. Afin de ne plus l'appeler, ajoutons une variable, appelons-la imgSum et mettons-y la valeur imgSum = 3 ; .
Ajoutons à la condition que si le nombre d'images est supérieur ou égal à notre variable (imagesCount >= imgSum && imagesCount > 0), alors on remplit la condition, sinon on supprime le préchargeur. Ainsi, grâce à cette variable imgSum, on peut paramétrer le chargement du préchargeur pour un certain nombre d'images.
Lorsque la barre de progression fonctionne rapidement, notre pourcentage dépasse 100, réparons cela tout de suite. Ouvrez le fichier plugin.js, recherchez-y l'endroit où le pourcentage est formé et ajoutez d'abord la condition suivante, vérifiez la valeur du pourcentage, si elle est supérieure à 100, puis renvoyez 100, sinon laissez-la inchangée.
global_settings.percent = (global_settings.percent > 100) ? 100 : global_settings.percent ;
Ajoutons quelques images supplémentaires, voyons comment le préchargeur se comportera avec un grand nombre d'entre elles et vérifions en même temps les paramètres supplémentaires.
Sur cette note, je conclus la leçon, si vous êtes intéressé, assurez-vous de la partager avec vos amis.
La leçon a été préparée par Denis Gorelov.
Objets de base et techniques de gestion de WINDOWS
Créer un préchargeur JS à part entière pour une application AJAX
Pertinence - qu'est-ce que c'est en termes simples
Le téléphone ne voit pas la carte mémoire, que dois-je faire ?
Service de contrôle d'une entreprise et de sa réputation Comment vérifier sa réputation
Le vendeur demande de clôturer le litige sur Aliexpress - que faire ?
Qu'est-ce que Paypal et comment l'utiliser