Comment créer un préchargeur d'image impressionnant

À quelle fréquence trouvez-vous que les images d'un site Web se chargent avec élégance? le genre où une icône de chargement apparaît pour la première fois, puis l’image s’estompe une fois chargée? Cette technique peut considérablement améliorer les performances de votre site Web. Si vous n'êtes pas déjà familiarisé avec cette méthode, vous avez de la chance! Aujourd'hui, nous allons créer un plugin de préchargement pour vos projets. Intrigué? Commençons!

Étape 1: Configuration de votre espace de travail

Premièrement, nous allons configurer le dossier de projet pour ce tutoriel. Nous aurons besoin de:

Notre fichier HTML principal
Dossier CSS pour notre feuille de style et icône de chargement (dans le dossier 'i')
Dossier JS pour jQuery et notre plugin
IMAGES

Étape 2: le HTML

Nous allons commencer avec le code HTML.

     Préchargeur d'image       Preloader - Chargez les images avec style

Rien d'extraordinaire ici: un code HTML simple pour une simple galerie. Nous avons importé jQuery, notre plugin jquery.preloader.js (actuellement vierge) et la feuille de style de notre préchargeur. Pour finir, nous allons ajouter une liste non ordonnée, qui contiendra des éléments de liste sous forme d'images entourées d'une balise d'ancrage (généralement effectuées sur un site Web pour ouvrir une lightbox ou créer un lien vers un site)..

Notez que l'extra p Les étiquettes enveloppant chaque ancre sont utilisées dans le but de styliser l'image; ils ne sont pas explicitement requis.

Étape 3: le CSS

Maintenant, nous allons créer un preloader.css feuille de style dans le css dossier, et, à l'intérieur de celui-ci, créer un sous-dossier je dans lequel nous allons conserver notre icône de préchargement. Preloaders.net propose une belle collection d'icônes de chargement parmi lesquelles vous pouvez choisir. Ajoutez le code suivant à votre feuille de style:

 * marge: 0; rembourrage: 0;  body background: url (i / bg.jpg);  #container width: 960px; marge: 0px auto;  h2 font-weight: 100; text-shadow: #ffffff 1px 1px 0px; text-align: center; rembourrage: 20px; taille de police: 32px; couleur: # 555555; border-bottom: 1px en pointillé #ccc; marge inférieure: 30 px; famille de polices: Georgia, "Times New Roman", Times, serif;

Premièrement, nous avons créé un 960px conteneur centré et ont ajouté un arrière-plan à la page. De plus, nous avons ajouté un style de base au titre ( h2 tag).

Styliser la galerie

Ensuite, nous allons styliser la galerie et, pendant que nous y sommes, ajoutons un peu de bonté CSS3..

 #gallery list-style: none;  #gallery li background: # e8e8e8; float: gauche; bloc de visualisation; bordure: 1px solide # d7d7d7; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 1px 1px 6px #ddd; -moz-box-shadow: 1px 1px 6px #ddd; box-shadow: 1px 1px 6px #ddd; marge: 15px 56px; rembourrage: 0;  #gallery li p border: 1px solid #fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; marge: 0; rembourrage: 7px;  #gallery li a display: block; couleur: #fff; texte-décoration: aucun; rembourrage: 0;  #gallery img width: 315px; hauteur: 210px; marge: 0; rembourrage: 0;

À ce stade, notre galerie devrait ressembler à ceci:

Configuration de la classe Preloader

Créons un précharge classe qui sera chargée d'afficher l'icône de chargement pendant le chargement des images.

 .preloader background: url (i / 89.gif) center center no-repeat #ffffff; affichage: inline-block;

L'élément de précharge afficher la propriété doit être définie sur bloc ou bloc en ligne; sinon, l'icône de chargement ne s'affichera pas.

Étape 4: écriture du plugin

Commençons par créer la structure et les options du plugin.

En tenant compte des options de personnalisation, un plugin est beaucoup plus flexible pour l'utilisateur.

Nous commençons avec la structure de base:

 $ .fn.preloader = function (options) var defaults = retard: 200, preload_parent: "a", check_timer: 300, ondone: function () , oneachload: fonction (image) , fadein: 500 ; // déclaration des variables et mise en cache des images et du conteneur parent var options = $ .extend (valeurs par défaut, options),

Nos options

retard - Retard successif entre les fondus dans les images
précharge_parent - Ajoutez la classe de préchargement au parent mentionné. Si introuvable, l'image est encapsulée dans une balise d'ancrage
à fond - Rappel à exécuter lorsque toutes les images sont chargées
sur chaque chargement - Appelé lorsque chaque image est chargée avec image comme paramètre
fadein - Fondu dans la durée d'animation

Étape 5: Variables

Ensuite, nous déclarons et mettons en cache les variables que nous utiliserons dans le reste du plugin.

 var defaults = delay: 200, preload_parent: "a", check_timer: 300, ondone: function () , oneachload: function (image) , fadein: 500; // déclaration des variables et mise en cache des images et du conteneur parent var options = $ .extend (paramètres par défaut, options), root = $ (this), images = root.find ("img"). css ("accessibility": "hidden" , opacité: 0), timer, compteur = 0, i = 0, checkFlag = [], delaySum = options.delay;

Premièrement, nous mettons en cache l’élément racine (toujours une pratique recommandée), puis nous trouvons les images (en les masquant également) et, enfin, nous déclarons les variables qui seront expliquées plus en détail au fur et à mesure que nous les contrerons..

Il convient de noter ici deux choses: vous pouvez d’abord penser que la solution la plus simple consiste à masquer les images, puis à les afficher en fondu, plutôt que de parcourir tout ce code. Cependant, le problème est que, si nous cachons les images, le navigateur marque l'espace vide qu'ils occupaient auparavant, et donc la mise en page, elle-même, est foirée quand ils sont finalement effacés. Bon, eh bien, si nous utilisions opacité "montrer" et "cacher" les images? C'est une meilleure pratique, cependant, certaines versions d'IE n'aiment pas cette méthode..

Étape 6: Ajout de la classe Preloader

Nous allons maintenant parcourir chaque élément d’image et vérifier si son parent est celui mentionné dans l’option. Si c'est le cas, nous y ajoutons notre classe de préchargement; sinon, nous enveloppons l'image dans une balise d'ancrage avec une classe de précharge.

 images.each (function () var $ this = $ (this); if ($ this.parent (options.preload_parent) .length == 0) $ this.wrap (""); autre $ this. parent (). addClass ("preloader"); checkFlag [i ++] = false;); images = $ .makeArray (images);

Ici, nous utilisons un tableau checkFlag, et définissent la valeur de chaque élément de tableau pour faux. Son utilisation sera clarifiée à mesure que vous avancez.

Étape 7: Tout rassembler

Nous allons maintenant mettre en œuvre ce qui se passe réellement dans les coulisses. Il y a un booléen propriété, appelée Achevée, associé à l'objet image. Lorsque l'image est complètement chargée, ce booléen est défini sur vrai. Donc, nous continuons à vérifier cette propriété pour chaque image, et, si elle est bien définie sur vrai, nous nous fondons dans cette image.

Nous pouvons utiliser le setInterval fonction pour déterminer en permanence si les images ont été chargées ou non. C'est là que le check_timer L'option vient: il mappe directement à la fréquence de notre minuterie.

Une image a aussi un en charge événement associé à celui-ci; vous vous demandez probablement pourquoi nous ne l'utilisons pas. La raison en est que certains navigateurs ne fonctionnent pas bien avec cet événement; en tant que tel, nous le sautons. Nous avons besoin d'une solution qui fonctionne comme un charme sur tous les navigateurs. Nous commençons avec:

 init = function () timer = setInterval (function () , options.check_timer);

minuteur est la variable qui référencera la minuterie. Cela est nécessaire pour éventuellement arrêter le chronomètre. Cette fonction est déclarée avec toutes les variables.

Vérification de chaque image

Nous allons parcourir le tableau et vérifier chaque image Achevée propriété pour déterminer si le téléchargement est terminé. Si le fichier a été téléchargé, nous le réglerons sur visible et nous allons le faire apparaître lentement. Lorsque l'animation est terminée, nous supprimons la classe de préchargement de son parent.

 pour (i = 0; i  Il y a un petit problème ici: la minuterie continuera à vérifier - même après les images ont toutes été chargées. Pour contrer cela, nous allons ajouter une variable de compteur et l'incrémenter après le chargement de chaque image. De cette façon, nous pouvons vérifier si la variable de compteur est égale à la taille du tableau d'images. Si c'est le cas, on s'arrête.
  timer = setInterval (function () if (compteur> = checkFlag.length) clearInterval (timer); options.ondone (); return; pour (i = 0; i Cependant, il y a un autre petit problème maintenant. Notre minuterie peut s'arrêter plus tôt que prévu; si une image a été chargée, son Achevée propriété a été définie sur vrai et le compteur s’incrémente donc de 1. Maintenant, lorsque la boucle est exécutée la prochaine fois, l’image est déjà chargée, la Achevée la propriété est définie survrai, et, ainsi, la boucle sera exécutée deux fois! Pour surmonter ce problème, nous utilisons le checkFlag tableau. Quand une image est chargée, nous allons définir checkFlag à vrai, et définir la condition pour que le compteur s'incrémente uniquement à la condition que le checkFlag La valeur est faux. Donc, le compteur est incrémenté une seule fois: quand une image est chargée pour la première fois.
  timer = setInterval (function () if (compteur> = checkFlag.length) clearInterval (timer); options.ondone (); return; pour (i = 0; i   Notez que nous appelons le à fond fonctionne lorsque le drapeau est supérieur à la longueur du tableau, c’est-à-dire lorsque toutes les images sont chargées. Quand le compteur est incrémenté, sur chaque chargement est appelé avec l'image courante passée en paramètre.
 
  Étape 8: La partie facile 
 Enfin, dans cette étape, nous appelons le init (); fonction à la fin du plugin. 
  init (); // appelé à la dernière ligne du plugin
 C'est tout; Nous avons créé un plugin de préchargement qui fonctionne parfaitement et sa taille est inférieure à 2 Ko. Reste cependant un problème: l'image de l'icône de chargement est chargée de manière aléatoire. Nous ne voulons pas ça. Dans la section suivante, nous nous occuperons de cela.
 
  Étape 9: Aller de l'avant 
  Pour résoudre le problème mentionné ci-dessus, nous allons d'abord charger l'icône, puis appeler le init une fonction. Mais l’icône de chargement étant une image d’arrière-plan, nous l’injectons en tant qu’image dans la page, tout en la gardant masquée. Quand il charge, nous appelons le init une fonction. Nous préchargons essentiellement l'icône elle-même. 
  var icon = jQuery ("", id: 'loadingicon', src: 'css / i / 89.gif'). hide (). appendTo (" body "); timer = setInterval (function () if (icon [0] .complete == true) clearInterval (timer); init (); icon.remove (); return;, 100);
 Nous créons d’abord un objet image avec un identifiant de chargementicon, et un la source pointant vers le chemin de l'icône de chargement. Ensuite, nous y ajoutons le corps et initialement le cacher. Enfin, nous définissons l’intervalle pour vérifier si l’icône a été chargée ou non. Si tel est le cas, nous supprimons la minuterie et commençons le préchargement des images. N'oubliez pas de supprimer cette icône aussi! 
 
 Conclusion
 Avec cette dernière étape, nous avons terminé! Cette fonctionnalité fonctionne dans tous les navigateurs, comme prévu, et se dégrade gracieusement. Assurez-vous simplement de définir l'élément de préchargement afficher propriété à bloc ou bloc en ligne. Il est maintenant prêt à être utilisé dans vos projets. Merci d'avoir lu!



		
			
	   
	




Code