Comment faire un preloader pendant le chargement. Création d'un préchargeur JS à part entière pour une application AJAX. Cloner des images en boucle

De nombreux programmeurs optimisent le code JavaScript et CSS pour accélérer le chargement de la page.
Mais tous ne fabriquent 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 :

1. < div id ="preloaderbg" class ="centerbg1" >
2. < div class ="centerbg2" >
3. < div id ="preloader" >
6. < script type ="text/javascript" >
7. document .getElementById("preloaderbg").style.display = "bloc" ;

1. .centerbg1(
2. affichage : aucun ;
3. largeur : 100 % ;
4. hauteur : 100 % ;
5. position : absolue ;
6. haut : 0px ;
7. gauche : 0px ;
8. indice z : 1000
9. arrière-plan : url("/design/im/texture1.jpg" ) #3c363e ;
10. .centerbg2(
11. position : absolue ;
12. gauche : 50 %
13. haut : 50 % ;
14. #preloader(
15. haut : -50 % ;
16. gauche : -50%
17. position : relative ;
18. largeur : 333 px ;
19. hauteur : 26px ;
20. arrière-plan : url();
21. bordure : solide #edda3d 2px ;

* Ce code source a été mis en surbrillance avec Source Code Highlighter .

En conséquence, immédiatement après le chargement, nous avons un bloc avec une barre de progression animée au centre de la page. Le paramètre de débordement doit être modifié afin que la barre de défilement n'apparaisse pas et que l'utilisateur ne puisse pas faire défiler vers le bas et regarder le contenu de la page.

Ensuite, lorsque tout est chargé, vous devez retirer le préchargeur et régler le débordement sur la position visible.

2. document .body.style.overflow = "visible" ;

* Ce code source a été mis en surbrillance avec Source Code Highlighter .

J'ai placé cette partie du code dans un fichier avec des fonctions JS, plreloader1.js

Si vous créez une barre de progression à partir d'un GIF animé, elle peut s'avérer trop lourde, parfois même plus grande que la page elle-même où elle est placée.
Par conséquent, il est préférable de dessiner une bande (par exemple, telle), de la mettre en arrière-plan pour le bloc avec le préchargeur d'ID et de déplacer la position d'arrière-plan sur la minuterie.

* Ce code source a été mis en surbrillance avec Source Code Highlighter .

Et après le téléchargement, procédez comme suit :

1. clearInterval(pbPos);
2. document .getElementById("loaderbg").style.display = "none" ;

* Ce code source a été mis en surbrillance avec Source Code Highlighter .

Le résultat du travail peut être vu.

Cette méthode présente des inconvénients - Si vous configurez le préchargeur pour qu'il se cache lors du chargement, c'est-à-dire en attendant que toutes les images se chargent, l'utilisateur peut penser que la page vient de se bloquer - en fait, à part l'animation, rien ne se passe. Si vous accrochez $(document).ready() depuis jQuery, alors après la disparition du preloader, les images seront uniquement chargées.

Par conséquent, il est suggéré d'utiliser…

Méthode numéro 2. La vérité est là-bas, ou les Jedi riposteront.
Pour commencer, 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 de la div, dont nous modifierons la largeur en fonction du pourcentage de chargement.

1. < div id ="loaderbg" class ="centerbg1" >
2. < div class ="centerbg2" >
3. < div id ="preloader" >
4. < img src ="/design/im/progbar_ph.gif" />
5. < div id ="progbarfg" >

* Ce code source a été mis en surbrillance avec Source Code Highlighter .

Progbar_ph.gif est une image de 1 pixel de haut et de la largeur de notre barre de défilement ( exemple donné 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

#progbarfg (largeur : 0px ; arrière-plan : url('/design/im/progbar_fg.png'))

Il reste maintenant à faire un petit script qui chargera dynamiquement le contenu du site et les images. 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 moyen entièrement réalisé en AJAX. Le chargement ressemble à ceci :

• chargement du code HTML
• les images commencent à se charger
• puis un cadre
• fichiers JS supplémentaires (bien qu'il soit préférable de tout coller en un seul)
• une certaine fonction (ou plusieurs) est lancée, ce qui tire du contenu supplémentaire.

À tout cela (moins CSS et HTML), nous attribuons un poids en octets (ou poids conditionnel), par exemple un, et au fur et à mesure que chaque fichier est chargé (ou qu'une fonction est exécutée), nous déplaçons notre barre de progression.

J'ai implémenté 2 méthodes - la première est simple, elle s'allume comme ceci :
juste avant nous écrivons:

< script type ="text/javascript" >
dLoader.start("progbarfg" , 333, "count" );

Le premier paramètre est l'identifiant du bloc avec la barre de chargement active en arrière-plan, le second est la largeur de l'image, le troisième paramètre est la méthode par laquelle nous allons calculer le poids du contenu.

Le script scanne toutes les images de la page et leur attribue un poids égal à 1. Tous les fichiers JS sont écrits dans son corps, comme je le décrirai ci-dessous.
Cependant, je veux que le poids de chaque unité de contenu ne soit pas une unité, mais un volume réel en octets. Oui, et pour les applications AJAX, je voudrais charger immédiatement tous les graphiques.

Pour ce faire, j'ai écrit un script PHP qui scanne un dossier avec des images de conception et met tout cela avec des tailles de fichiers dans un tableau, éventuellement en le compressant.

Donc ajouter avant Ensuite, nous aurons une barre de progression qui montrera la progression du chargement de tout le contenu de la page, après quoi il disparaîtra.

* Ce code source a été mis en surbrillance avec Source Code Highlighter .

Lorsque tous les fichiers JS sont chargés, les fonctions qui se trouvent dans le tableau d'appel sont lancées. Si nous sommes avec jQuery charger le contenu, la fonction ressemblera à ceci :

1. fonction fn(callBack)(
2. $.get("/" , params , function (data)( someHandler(data); eval(callBack); ));

* Ce code source a été mis en surbrillance avec Source Code Highlighter .

Le script PHP fait ce qui suit : il entre les scripts nécessaires avec leurs tailles, ainsi que des images et des fonctions supplémentaires dans un tableau. Le code:

1. $données["js"] = tableau(
2. tableau ("path" => "jquery-1.2.6.min.js" , "size" => filesize($jsRoot."/jquery-1.2.6.min.js" )),
3. tableau ("path" => "functions.js" , "size" => filesize($jsRoot."/functions.js" ))
4. $data ["im" ] = GetFiles($imgRoot, true );
5. $data["invoke"] = tableau(
6. "action" => "loadTemplates" ,
7. "size" => GetDirSize(dirname(__FILE__)."/design/ajax templates/" , false )
8. $data["jspath" ] = "/design/js/" ;
9. $data["impath" ] = "/design/im" ;

* Ce code source a été mis en surbrillance avec Source Code Highlighter .

Une fois toutes les images et tous les fichiers JS chargés, l'événement onLoad que vous avez spécifié dans la fonction dLoader.start() est appelé

Il existe également un moyen de personnaliser le processus de démarrage.

Une leçon dans laquelle nous examinerons le processus de création d'un préchargeur pour une page (page de préchargement). En tant que préchargeur, nous utiliserons l'icône Font Awesome ou une image gif animée qui s'affichera lors du chargement de la page.

Comment créer un préchargeur pour un site Web

La page d'un site Web ne se charge pas instantanément lorsqu'elle est ouverte. Le chargement et l'affichage de la page prennent un certain temps, qui peut aller de 1 à plusieurs secondes. Pour que ce processus (c'est-à-dire le processus de chargement de la page) se déroule d'une manière ou d'une autre pour l'utilisateur, une image ou une icône animée peut lui être montrée pendant ce temps.

Le processus de création d'un préchargeur est assez simple et consiste dans le fait que nous devons afficher un bloc (#before-load) contenant une image ou une icône animée, immédiatement après l'ouverture de la page du site. Et une fois la page entièrement chargée, ce bloc (#before-load) avec une image ou une icône gif animée doit être masqué à l'utilisateur.

Créer un préchargeur pour une page

Le développement d'un preloader qui ressemblera à un fond blanc avec une icône animée se fera en 3 étapes :

1. Créons un code HTML composé d'un bloc et d'une icône Font Awesome. Ce morceau de code doit être placé dans le document de manière à ce qu'il soit d'abord affiché à l'utilisateur, c'est-à-dire juste après la balise body d'ouverture :

2. Créons des styles CSS pour le bloc div et l'élément i (icône).

#before-load ( 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*/ bas : 0 ; /*position de l'élément en dessous*/ background : #fff ; /*couleur de fond du bloc*/ z-index : 1001 ; /*le positionner au-dessus de tous les éléments sur la page*/ ) #before-load i ( font-size : 70px; /*icon size*/ position: absolute; /*position est absolue, positionnée par rapport à son ancêtre le plus proche*/ left: 50%; /*left 50 % de la largeur de la boîte parent*/ haut : 50 %; /*haut 50 % de la hauteur du bloc parent*/ marge : -35px 0 0 -35px; /*décaler l'icône pour qu'elle soit centrée*/ ) 3 . Ajoutez un script qui masque le preloader après le chargement de la page) :

Si vous souhaitez utiliser une image gif animée comme indicateur de préchargement, vous devez apporter les modifications suivantes aux étapes ci-dessus :

Dans le code HTML, supprimez les classes Font Awesome :

V style css apportez les modifications suivantes (modifiez la règle #before-load i (..)) :

#before-load i ( width : 70px; /*gif width*/ height : 70px; /*gif height*/ position : absolu ; gauche : 50 % ; haut : 50 % ; arrière-plan : url("assets /images/img .gif") sans répétition 50 % 50 % ; /*emplacement (url) images gif et autres paramètres */ margin: -35px 0 0 -35px; )

Vous pouvez télécharger des images gif animées pour votre site à partir de la ressource http://preloaders.net/ ou utiliser cette archive.

Personne n'aime attendre longtemps le chargement d'une page de site Web, d'un curseur ou d'autres informations. Mais s'il n'est pas possible de réduire le temps d'attente du site (par exemple, il est interactif et tous les scripts doivent être chargés pour un fonctionnement correct), vous devez essayer d'améliorer d'une manière ou d'une autre le délai de chargement.

Pour ce faire, utilisez des préchargeurs animés.

Nous avons sélectionné pour vous 20 préchargeurs intéressants réalisés avec CSS3 et HTML5 ou JQuery. Ils peuvent améliorer considérablement l'expérience utilisateur.

Vous pouvez utiliser des indicateurs de chargement animés pour les galeries, les curseurs, les blogs, etc.

Voici quelques chargeurs simples et élégants réalisés avec Aide CSS. Ils peuvent facilement faire partie de n'importe quel projet Web - il suffit de copier et coller le code.

Et c'est un préchargeur juteux sous la forme d'un arc-en-ciel, créé sur CSS. Adapté aux projets lumineux, dynamiques et jeunes !

Et cet indicateur de chargement est bien adapté aux sites avec un design de carte.

Ce préchargeur astucieux produit un effet magique en combinant HTML et CSS. Il a fière allure et peut fonctionner à merveille sur tout type de site Web.

Animation dynamique - blocs multicolores qui déplacent une petite balle.

Il s'agit d'un excellent téléchargeur qui peut être intégré à un logo, un nom de site Web ou un slogan accrocheur. Deviendra un élément de marque fort pour votre site Web.

Cet étonnant chargeur CSS convient à divers projets et applications. Simple et élégant, vous pouvez l'ajouter à votre site en deux clics.

Seulement deux couleurs et des formes simples. Mais quelle animation intéressante ! Ce préchargeur décorera n'importe lequel de vos sites.

Ce préchargeur est idéal pour les projets dynamiques avec un design élégant et minimaliste.

Encore des classiques, encore des cubes. Mais une animation très intéressante rend cet indicateur de chargement accrocheur.

Et cette photo est de la catégorie "Je ne peux pas détacher mes yeux." Tout simplement fascinant et garanti pour égayer le temps de chargement de vos utilisateurs.

Si vous recherchez des indicateurs de chargement de type Tumblr, consultez-les ! Animations sur Basé sur CSS, à l'aide d'icônes SVG.

Et ce sont des préchargeurs CSS3 interactifs circulaires. Passez votre souris dessus sections séparées et regardez l'effet intéressant.

Animation simple et élégante aux couleurs pastel. Idéal pour les sites Web féminins.

Et dans ce kit, vous pouvez choisir l'animation de chargement à votre goût. Sera-ce une montre ou juste des cercles blancs ?

Un chargeur simple avec des formes rectangulaires qui tournent. Facile à mettre en œuvre sur n'importe quel site.

Et voici toute une collection de chargeurs animés. Il y a beaucoup de choix et tous s'intègrent facilement à n'importe quel site Web.

Preloader intéressant avec des cercles. Ils se reconstruisent ensuite en triangle, puis en ligne pointillée.

Une autre collection d'indicateurs, avec différentes animations. Tous les préchargeurs ont la forme d'un cercle.

Cette animation peut être superposée sur un logo textuel ou sur n'importe quel texte, tel qu'un nom d'entreprise ou un slogan.

Nous espérons que vous trouverez quelque chose dans cette collection utile pour votre prochain projet !

Selon le type de ressource Web et la quantité d'informations qu'elle contient, le chargement du site peut prendre de quelques millisecondes à quelques secondes. Pendant le processus de chargement, beaucoup de choses peuvent arriver au site : la mise en page peut sauter dans différents côtés, le texte peut changer de style. Il y a une volonté toute naturelle de cacher toutes ces bacchanales aux yeux des visiteurs. C'est à ça que servent les préchargeurs.

Le préchargeur est un indicateur de chargement du site. Il peut être réalisé à la fois sous forme d'image gif animée et sous forme de barre de chargement. Mais peu importe apparence preloader, le principe de son fonctionnement sera le même : montrer à l'utilisateur un indicateur de chargement le plus tôt possible, et masquer cet indicateur une fois le chargement terminé.

Comment une page Web se charge

Avant de pouvoir créer un indicateur de processus, vous devez comprendre le processus lui-même. Le chargement des pages Web ne fait pas exception. Alors, comment une page Web se charge-t-elle ?

1. Le navigateur envoie une requête au serveur.
2. Le serveur commence à envoyer le code html de la page au navigateur. Les spécificités du transfert de données sur Internet sont telles que le navigateur ne reçoit pas le code de la page immédiatement, mais en partie.
3. Afin de gagner du temps, le navigateur commence à traiter le code html de la page sans attendre la fin du document.
4. Dès que le navigateur rencontre une ressource externe dans le code de la page, il envoie une requête au serveur pour obtenir cette ressource. En même temps, dans la plupart des cas, si cette ressource est un fichier javascript, le traitement ultérieur de la page s'arrête jusqu'à ce que le code javascript de ce fichier soit entièrement chargé et exécuté.
5. Dès que le navigateur a complètement reçu et traité le code html de la page (le gestionnaire a atteint la fermeture balise html), le navigateur déclenche l'événement DOMContentLoaded, également appelé DOM Ready .
6. Dès que la dernière ressource externe est chargée, le navigateur déclenche l'événement window.onload. La page est entièrement chargée.

Processus de création

Maintenant, en comprenant l'ordre de chargement d'une page Web, vous pouvez créer vous-même une liste de tâches et de conditions pour notre préchargeur. Mes conditions pour cela sont :

• Doit être affiché le plus tôt possible, en masquant tout le contenu.
• Dans la mesure du possible, la cartographie ne doit pas dépendre de ressources externes.
• Doit être masqué dès que la page est entièrement chargée. Pour le masquage, vous pouvez utiliser n'importe quelle bibliothèque javascript disponible.

Si votre page est largement indépendante des graphiques, vous pouvez utiliser DOM Ready au lieu de window.onload pour masquer le préchargeur.

Pour résoudre le premier problème, placez le code html suivant juste après la balise body d'ouverture :

Pour notre préchargeur, nous avons besoin de styles, mais nous ne voulons pas dépendre de fichiers externes, nous placerons donc les styles directement dans le document, quelque part dans l'en-tête :

#page-preloader ( position : fixe ; gauche : 0 ; haut : 0 ; droite : 0 ; bas : 0 ; arrière-plan : #000 ; z-index : 100500 ; ) #page-preloader .spinner ( largeur : 32 pixels ; hauteur : 32px ; position : absolue ; gauche : 50 % ; haut : 50 % ; arrière-plan : url("/images/spinner.gif") sans répétition 50 % 50 % ; marge : -16px 0 0 -16px; )

Malheureusement, je ne pourrai pas abandonner complètement les ressources externes, car nous avons besoin d'une image gif animée. Mais étant donné la petite taille de l'image elle-même, c'est un sacrifice acceptable.

Il ne reste plus qu'à masquer notre préchargeur après le chargement de la page. Ici on n'est plus limité dans les moyens, on peut donc utiliser jQuery :

$(window).on("load", function () ( var $preloader = $("#page-preloader"), $spinner = $preloader.find(".spinner"); $spinner.fadeOut(); $preloader.delay(350).fadeOut("slow"); ));

Prêt! Désormais, au lieu que la mise en page saute dans différentes directions, le visiteur verra notre écran de chargement soigné pendant le chargement de la page. Une version de travail d'un tel préchargeur peut être vue sur le site Web