De nombreux programmeurs optimisent JavaScript et CSS pour accélérer le chargement de la page.
Mais tous ne font pas de préchargeurs qui donnent à l'utilisateur l'effet de téléchargements subjectivement plus rapides.
Méthode numéro 1. Pas cher et gai.
L'idée est simple - vous devez centrer l'image, ce qui montrera à l'utilisateur que la page est toujours en cours de chargement. Le code est assez simple, écrivez juste après
- < div id ="preloaderbg" class ="centerbg1" >
- < div class ="centerbg2" >
- < div id ="preloader" >
- < script type ="text/javascript" >
- document .getElementById ("preloaderbg") .style.display \u003d "block";
* Ce code source a été mis en surbrillance avec Surligneur de code source.
- .centerbg1 (
- affichage: aucun;
- largeur: 100%;
- hauteur: 100%;
- position: absolue;
- haut: 0px;
- gauche: 0px;
- indice z: 1000;
- arrière-plan: url ("/ design / im / texture1.jpg") # 3c363e;
- .centerbg2 (
- position: absolue;
- gauche: 50%;
- haut: 50%;
- #preloader (
- en haut: -50%;
- gauche: -50%;
- position: relative;
- largeur: 333px;
- hauteur: 26px;
- fond: url ();
- bordure: solide # edda3d 2px;
Par conséquent, 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 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 définir le débordement sur visible.
* Ce code source a été mis en surbrillance avec Surligneur de code source.
- document .body.style.overflow \u003d "visible";
J'ai mis cette partie du code dans un fichier avec des 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 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, une), de la placer comme arrière-plan du bloc avec le préchargeur d'ID et de déplacer la position d'arrière-plan par minuterie.
* Ce code source a été mis en surbrillance avec Surligneur de code source.
Et après le chargement, nous faisons ceci:
* Ce code source a été mis en surbrillance avec Surligneur de code source.
- clearInterval (pbPos);
- document .getElementById ("loaderbg") .style.display \u003d "none";
Le résultat du travail peut être vu.
Cette méthode présente des inconvénients - Si vous mettez le préchargeur en cache, c'est-à-dire lorsque vous attendez que toutes les images soient chargées, l'utilisateur peut penser que la page vient de se bloquer - en fait, rien ne se passe sauf l'animation. Si vous vous accrochez à $ (document) .ready () de jQuery, puis après la disparition du préchargeur, les images ne seront chargées.
Par conséquent, il est proposé d'utiliser ...
Méthode numéro 2. La vérité est quelque part à proximité, ou les Jedi ripostent.
Pour commencer, nous allons dessiner 2 bandes de chargement - actives et pas très.
Définissez-le inactif comme arrière-plan et définissez l'actif comme arrière-plan pour la diva, pour laquelle nous changerons la largeur en fonction du pourcentage de charge.
* Ce code source a été mis en surbrillance avec Surligneur de code source.
- < div id ="loaderbg" class ="centerbg1" >
- < div class ="centerbg2" >
- < div id ="preloader" >
- < img src ="/design/im/progbar_ph.gif" />
- < div id ="progbarfg" >
Progbar_ph.gif est une image de 1 pixel de haut et la largeur de notre barre de défilement (cet exemple est bogué sans IE, et je n'ai pas encore trouvé d'autre moyen de centrer les divs avec la barre de progression).
Les styles sont les mêmes que dans la méthode précédente, sauf que
#progbarfg (width: 0px; background: url (‘/ design / im / progbar_fg.png’))
Reste maintenant à faire un petit script qui chargera dynamiquement le contenu du site et des photos. 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.
Prenez un site moyen entièrement réalisé sur AJAX. Le téléchargement se déroule approximativement comme suit:
- le code HTML se charge
- les images commencent à se charger
- puis une sorte de cadre
- fichiers JS supplémentaires (bien qu'il soit préférable de tout coller en un)
- une certaine fonction (ou plusieurs) est lancée, qui rassemble du contenu supplémentaire.
J'ai implémenté 2 méthodes - la première est simple, elle s'allume comme ceci:
juste avant écrire:
< script type ="text/javascript" >
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 second est la largeur de l'image, le troisième paramètre est la méthode par laquelle nous considérons le poids du contenu.
Le script scanne toutes les images des pages et leur attribue un poids égal à 1. Tous les fichiers JS sont enregistrés dans son corps, comme je l'expliquerai ci-dessous.
Cependant, je veux que le poids de chaque unité de contenu ne soit pas une unité, mais un vrai volume en octets. Et pour les applications AJAX, je voudrais charger immédiatement tout le planning.
Pour ce faire, j'ai écrit un script en PHP qui scanne le dossier avec des images de conception et met tout cela avec des tailles de fichier dans un tableau, le compressant éventuellement.
Donc, terminer avant Ensuite, nous obtenons une barre de progression qui montrera la progression du chargement de tout le contenu de la page, après quoi il disparaîtra progressivement.
* Ce code source a été mis en surbrillance avec Surligneur de code source.
Une fois tous les fichiers JS chargés, les fonctions qui se trouvent dans le tableau d'invocation sont lancées. Si nous chargeons du contenu à l'aide de jQuery, la fonction ressemblera à ceci:
* Ce code source a été mis en surbrillance avec Surligneur de code source.
- fonction fn (callBack) (
- $ .get ("/", params, fonction (données) (someHandler (données); eval (callBack);));
Le script PHP fait ce qui suit: il met les scripts nécessaires avec leurs tailles dans le tableau, ainsi que des images et des fonctions supplémentaires. Code:
* Ce code source a été mis en surbrillance avec Surligneur de code source.
- $data ["js"] \u003d array (
- array ("path" \u003d\u003e "jquery-1.2.6.min.js", "size" \u003d\u003e filesize ($ jsRoot. "/ jquery-1.2.6.min.js")),
- array ("path" \u003d\u003e "functions.js", "size" \u003d\u003e filesize ($ jsRoot. "/ functions.js"))
- $ data ["im"] \u003d GetFiles ($ imgRoot, true);
- $ data ["invoke"] \u003d array (
- "action" \u003d\u003e "loadTemplates",
- "size" \u003d\u003e GetDirSize (dirname (__ FILE __). "/ design / ajax templates /", false)
- $ data ["jspath"] \u003d "/ design / js /";
- $ data ["impath"] \u003d "/ design / im";
Une fois toutes les images et les fichiers JS chargés, l'événement onLoad est déclenché, ce que vous avez spécifié dans la fonction dLoader.start ()
Il existe toujours un moyen de personnaliser le processus de démarrage.
Une leçon dans laquelle nous considérerons 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 sera affichée pendant le chargement de la page.
Comment faire un préchargeur pour un site
La page d'un site Web ne se charge pas instantanément à son ouverture. Il faut un certain temps pour charger et afficher la page, qui peut aller de 1 à plusieurs secondes. Pour que ce processus (c'est-à-dire le processus de chargement de la page) se lisse pour l'utilisateur d'une manière ou d'une autre, il peut lui être montré une image ou une icône animée pour cette fois.
Le processus de création d'un préchargeur est assez simple et consiste dans le fait que nous devons afficher un bloc (# avant le chargement) contenant une image ou une icône animée, immédiatement après l'ouverture de la page du site. Et une fois le chargement de la page terminé, ce bloc (# avant le chargement) avec le gif animé ou l'icône doit être caché à l'utilisateur.
Création d'un préchargeur pour une page
Nous allons développer un préchargeur qui ressemblera à un fond blanc avec une icône animée en 3 étapes:
1. Créez un code HTML composé d'un bloc et d'une icône Font Awesome. Ce morceau de code doit être placé dans le document afin qu'il soit d'abord affiché à l'utilisateur, c'est-à-dire immédiatement après la balise body d'ouverture:
2. Créez des styles CSS pour le bloc div et l'élément i (icônes).
# avant chargement (position: fixe; / * position de bloc fixe * / 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 inférieure de l'élément * / background: #fff; / * couleur d'arrière-plan du bloc * / z-index: 1001; / * placez-le sur tous les éléments de la page * /) # avant le chargement i (taille de police : 70px; / * taille de l'icône * / position: absolue; / * position absolue, positionnée par rapport à son ancêtre le plus proche * / gauche: 50%; / * gauche 50% de la largeur du bloc parent * / haut: 50%; / * haut 50 % de la hauteur du bloc parent * / margin: -35px 0 0 -35px; / * décalage de l'icône, de sorte que et est centrée * /) 3. Ajoutez le script après avoir caché preloder (lorsque le chargement de la charge page se produira dans la fenêtre d'objet):
Si vous souhaitez utiliser une image gif animée comme indicateur de préchargeur, vous devez apporter les modifications suivantes aux étapes ci-dessus:
Supprimez les classes Font Awesome dans le code HTML:
Dans les styles CSS, apportez les modifications suivantes (changez la règle # avant chargement i (..)):
# avant le chargement i (largeur: 70px; / * largeur de l'image gif * / hauteur: 70px; / * hauteur de l'image gif * / position: absolue; gauche: 50%; haut: 50%; arrière-plan: url ("actifs /images/img.gif ") sans 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 à partir de la ressource http://preloaders.net/ ou utiliser cette archive.
Personne n'aime attendre longtemps qu'une page se charge, un curseur ou d'autres informations. Mais si vous ne pouvez pas réduire le temps d'attente du site (par exemple, il est interactif et que tous les scripts doivent se charger pour qu'il fonctionne correctement), vous devez essayer de raccourcir le temps nécessaire pour charger la charge.
Pour ce faire, utilisez des préchargeurs animés.
Nous avons sélectionné pour vous 20 préchargeurs intéressants réalisés en CSS3 et HTML5 ou JQuery. Ils peuvent améliorer considérablement l'expérience utilisateur.
Vous pouvez utiliser des indicateurs de téléchargement animés pour les galeries, les curseurs, les blogs, etc.
Voici des chargeurs CSS simples et élégants. Ils peuvent facilement faire partie de n'importe quel projet Web - il suffit de copier et coller le code.
Et ceci est un préchargeur juteux sous la forme d'un arc-en-ciel, créé en CSS. Convient pour des projets jeunes et dynamiques!
Et cet indicateur de téléchargement est bien adapté aux sites avec une conception de carte.
Ce préchargeur élégant 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 mettent en mouvement une petite balle.
Il s'agit d'un excellent chargeur de démarrage qui peut être intégré au logo, au nom du site ou au slogan accrocheur. Deviendra un élément de marque fort pour votre site Web.
Ce formidable chargeur CSS convient à divers projets et applications. Simple et élégant, vous pouvez l'ajouter au site en deux clics.
Seulement deux couleurs et 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 du classique, encore des cubes. Mais une animation très intéressante rend cet indicateur de téléchargement accrocheur.
Et cette image appartient à la catégorie "Je ne peux pas détacher mes yeux". Il est tout simplement fascinant et garanti pour égayer le temps d'attente des téléchargements pour vos utilisateurs.
Si vous recherchez des indicateurs de téléchargement comme sur Tumblr, consultez-les! Animation basée sur CSS utilisant des icônes SVG.
Et ce sont des préchargeurs CSS3 interactifs circulaires. Passez la souris sur des sections individuelles et regardez un effet intéressant.
Animation simple et élégante aux couleurs pastel. Idéal pour les sites féminins.
Et dans ce kit, vous pouvez choisir l'animation du téléchargement à votre goût. Sera-ce une montre ou juste des cercles blancs?
Chargeur simple avec des formes rectangulaires qui tournent. Facile à mettre en œuvre sur n'importe quel site Web.
Et voici toute une collection de téléchargeurs animés. Il y a beaucoup de choix et tout est facilement intégré dans n'importe quel site.
Un préchargeur intéressant avec des cercles. Ils sont soit réarrangés en triangle, puis en pointillés.
Une autre collection d'indicateurs, avec diverses animations. Tous les préchargeurs ont la forme d'un cercle.
Cette animation peut être superposée à un logo texte ou à tout texte - par exemple, sur le nom de l'entreprise ou son slogan.
Nous espérons que quelque chose de cette collection vous sera utile dans votre travail sur le prochain projet!
Selon le type de ressource Web et la quantité d'informations qu'elle contient, le chargement d'un site peut prendre de quelques millisecondes à quelques secondes. Pendant le processus de téléchargement, beaucoup de choses peuvent arriver au site: la mise en page peut sauter dans différentes directions, le texte peut changer le style. Il y a une volonté tout à fait logique de cacher toutes ces bacchanales aux yeux des visiteurs. Pour cela, des préchargeurs sont conçus.
Le préchargeur est un indicateur de la charge du site. Il peut être réalisé à la fois sous la forme d'une image gif animée et sous la forme d'une échelle de chargement. Mais quelle que soit l'apparence du préchargeur, le principe de son fonctionnement sera le même: dès que possible pour montrer à l'utilisateur un indicateur de téléchargement, et à la fin du téléchargement, masquer cet indicateur.
Comment se charge une page Web
Avant de créer un indicateur de tout processus, vous devez comprendre le processus lui-même. Le chargement de pages Web ne fait pas exception. Alors, comment se charge la page Web?
- Le navigateur envoie une demande au serveur.
- Le serveur commence à envoyer le code html de la page au navigateur. La spécificité de la transmission de données sur Internet est telle que le navigateur ne reçoit pas le code de page immédiatement, mais en partie.
- Afin de gagner du temps, le navigateur commence à traiter le code html de la page, sans attendre la fin du document.
- Dès que le navigateur rencontre une ressource externe dans le code de page, il envoie une demande au serveur pour recevoir cette ressource. De plus, dans la plupart des cas, si cette ressource est un fichier javascript, le traitement ultérieur de la page est interrompu jusqu'à ce que le code javascript de ce fichier soit entièrement chargé et exécuté.
- Une fois que le navigateur a entièrement reçu et traité le code html de la page (le gestionnaire a atteint la fermeture de la balise html), le navigateur déclenche l'événement DOMContentLoaded, également appelé DOM Ready.
- 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 de la page Web, vous pouvez créer vous-même une liste de tâches et de conditions pour notre préchargeur. Mes conditions pour lui sont les suivantes:
- Il doit être affiché le plus tôt possible, couvrant tout le contenu.
- Dans la mesure du possible, la cartographie ne doit pas dépendre de ressources externes.
- Doit être masqué dès que le chargement de la page est terminé. Vous pouvez utiliser n'importe quelle bibliothèque javascript disponible pour la masquer.
Si votre page est presque indépendante des graphiques, au lieu de window.onload, vous pouvez utiliser DOM Ready pour masquer le préchargeur.
Pour résoudre le premier problème, mettez le code html suivant immédiatement après la balise body d'ouverture:
Pour notre préchargeur, nous aurons besoin de styles, mais nous ne voulons pas dépendre de fichiers externes, nous allons donc placer les styles directement dans le document, quelque part à l'intérieur de la tête:
# page-preloader (position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: # 000; z-index: 100500;) # page-preloader .spinner (width: 32px; height: 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.
Maintenant, il ne reste plus qu'à masquer notre préchargeur après avoir chargé la page. Ici, nous ne sommes plus limités dans les moyens, nous pouvons donc utiliser jQuery:
$ (window) .on ("load", function () (var $ preloader \u003d $ ("# page-preloader"), $ spinner \u003d $ preloader.find (". spinner"); $ spinner.fadeOut (); $ preloader.delay (350) .fadeOut ("slow");));
C'est fait! Maintenant, au lieu de sauter dans des directions différentes, 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
