Étape 2 : Mise en place du préchargement des images. Nous gérons le chargement des images. Préchargement d'images avec les nouvelles fonctionnalités HTML5

Afin de pouvoir télécharger un ou plusieurs fichiers sur le serveur, un champ spécial est utilisé dans le formulaire. DANS Navigateurs Firefox, IE et Opera, un tel élément est affiché sous la forme d'un champ de texte, à côté duquel se trouve un bouton intitulé « Parcourir... » (Fig. 1). Dans Safari et Chrome, seul le bouton « Sélectionner un fichier » est disponible (Fig. 2).

Riz. 1. Vue du champ de téléchargement d'un fichier dans Firefox

Lorsque vous cliquez sur le bouton, une fenêtre de sélection de fichier s'ouvre, dans laquelle vous pouvez spécifier le fichier que l'utilisateur souhaite utiliser.

La syntaxe du champ de téléchargement de fichier est la suivante.

Les attributs sont répertoriés dans le tableau. 1.

Avant d'utiliser ce champ, vous devez effectuer les opérations suivantes sur le formulaire :

définir la méthode d'envoi Données POST(method="post" );

définissez l'attribut enctype sur multipart/form-data .

Le formulaire de téléchargement de fichiers est illustré dans l'exemple 1.

Exemple 1 : Création d'un champ pour envoyer un fichier

HTML5 IE Cr Op Sa FX

Envoi d'un fichier au serveur

Bien que vous puissiez définir la largeur d'un champ à l'aide de l'attribut size, la largeur n'a en réalité aucun effet sur la sortie du formulaire. DANS Navigateurs Safari et dans Chrome, cet attribut n'a aucun effet.

L'attribut multiple est plus important ; il permet de ne pas se limiter à un seul fichier pour la sélection, mais d'en spécifier plusieurs à la fois pour un chargement simultané.

Si l'attribut accept n'est pas spécifié, alors les fichiers de n'importe quel type sont ajoutés et chargés. La présence d'accepter vous permet de limiter la sélection de fichiers, ce qui est particulièrement important lorsque vous devez uniquement télécharger une image ou une vidéo. La valeur est , plusieurs valeurs sont séparées par une virgule. Vous pouvez également utiliser les mots-clés suivants :

• audio/* - sélection fichiers musicaux n'importe quel type ;
• image/* - fichiers graphiques;
• vidéo/* - fichiers vidéo.

Dans le tableau 2 en montre valeurs valides accepter l'attribut.

Usage attributs supplémentaires montré dans l’exemple 2.

HTML5 IE 10+ Cr Op Sa Fx

Téléchargez vos photos sur le serveur

Tous les navigateurs ne prennent pas en charge les nouveaux attributs. IE ignore complètement multiple et accept , Safari ne prend pas en charge accept et Firefox ne fonctionne pas avec le type MIME, uniquement avec des mots-clés. Par conséquent, dans l’exemple ci-dessus, la valeur est définie spécifiquement pour Firefox sur image/*,image/jpeg . Notez également un bug étrange dans Opera qui n'autorise pas les espaces après les virgules à l'intérieur de accept .

Le résultat de l'exemple est présenté sur la Fig. 3. Veuillez noter qu'en raison de la présence de multiples, l'apparence du champ a quelque peu changé.

Note de l'auteur : Il semble que le chargement des images soit complètement négligé ou laissé à des plugins inutilement volumineux. Beau, lisse et chargement rapide site - la partie la plus importante une bonne expérience utilisateur, ainsi qu'une courtoisie de base envers votre designer. Qui veut voir sa conception ruinée par le chargement lent des images ligne par ligne à chaque fois qu'il entre dans une page ?

La plupart des sites sur lesquels je travaille contiennent beaucoup de photos, et tous les avantages Internet haut débit sont annulés par la nécessité de fournir des matériaux en ultra haute résolution rétine pour un nombre toujours croissant d'appareils. C'est le moment idéal pour prendre les rênes et commencer à contrôler le chargement des images. Dans cet article, je vais vous montrer quatre méthodes simples qui donneront à votre site une belle apparence et amélioreront considérablement ses performances.

Chaque fois que je vois une image se charger lentement, je me souviens de cette scène classique avec le gars de la bande dessinée.

1. Téléchargez chaque image séparément (un seul actif)

Il s'agit d'une technique que vous pouvez appliquer à tout ou partie des images de votre site pour empêcher (ou au moins masquer) le chargement traditionnel ligne par ligne des JPG sous-jacents. Nous allons commencer par envelopper chaque image dans un div avec la classe img_wrapper :

< div class = "img_wrapper" > < img src = "comicbookguy.jpg" alt = "" / > < / div >

Cet emballeur nous fournira quelques contrôle supplémentaire la taille de nos images et leur rapport hauteur/largeur, qu'une simple balise img ne peut garantir. Il vous donnera également la possibilité d'appliquer une icône de chargement - soit comme image d'arrière-plan, soit comme élément séparé– qui peut être masqué une fois le chargement de l’image terminé.

Pour cet exemple, nous limiterons notre image à un rapport hauteur/largeur de 4:3 – très important pour les sites responsive. Notez que nous avons également masqué l'image en utilisant opacity: 0;, ce qui nous permet de contrôler comment et quand nous la voyons lorsqu'elle apparaît. le bon moment.

Img_wrapper( position : relative ; remplissage en haut : 75 % ; débordement : caché ; ) .img_wrapper img( position : absolue ; haut : 0 ; largeur : 100 % ; opacité : 0 ; )

img_wrapper( position : relative ; rembourrage supérieur : 75 % ; débordement : caché ; Img_wrapper img ( position : absolue ; haut : 0 ; largeur : 100 % ; opacité : 0 ;

Chaque image du DOM déclenche un événement de chargement lorsque toutes ses données ont été chargées depuis le serveur et que l'image elle-même a été rendue par le navigateur. Pour capturer et lier cet événement, nous devrons utiliser JavaScript. Je vais commencer par ajouter un attribut onload à la balise image.

< div > < img src = "comicbookguy.jpg" alt = "" onload = "imgLoaded(this)" / > < / div >

Pour les débutants qui n'ont jamais rien vu de tel auparavant, cela s'appelle un attribut de script en ligne, et il nous permet de lier la fonctionnalité JavaScript directement aux événements déclenchés depuis Éléments DOM, ce qui revient à ajouter des styles directement aux éléments à l'aide de l'outil en ligne attribut de style. Croyez-le ou non, ces attributs de script en ligne constituaient une partie importante de l'écriture JavaScript aux débuts du Web et, comme les styles en ligne, sont aujourd'hui décriés par les activistes de la pureté du code et de la sémantique.

Donc, pour ceux d'entre vous qui sont dégoûtés par la vue du JavaScript en ligne et qui sont prêts à s'enfuir, restez dans les parages et croyez-moi sur parole, c'est toujours le plus efficace et le plus efficace. méthode fiable capturer l'événement de chargement de l'image dans le DOM. Même si je suis favorable au progrès et au HTML5, je n'ai absolument rien contre l'utilisation de techniques à l'ancienne tant qu'elles sont élégantes et fonctionnelles.

Une alternative à cela consiste à lier individuellement l'événement de chargement à chaque image du document prêt. Cependant, le problème survient lorsque les images sont chargées avant le déclenchement du document prêt et avant que nous ayons la possibilité de lier la fonctionnalité à l'événement de chargement de chaque image. Un problème distinct lorsque les images sont déjà mises en cache par le navigateur avec séance précédente, et téléchargez instantanément. Nous manquons l'événement et notre fonction n'est pas appelée. L'attribut onload ne présente pas ces problèmes car il est "pré-lié" à l'événement, pour ainsi dire, et est donc traité lorsque le navigateur analyse le code HTML.

Je n’ai absolument rien contre l’utilisation de techniques à l’ancienne tant qu’elles sont élégantes et fonctionnelles.

Avec l'attribut onload ajouté, la fonction imgLoaded() sera appelée lorsque l'image sera chargée. Il faut le placer dans fichier javascript dans l'en-tête de la page elle-même (après jQuery, si vous l'utilisez dans votre fonction, et après tout autre plugin) afin qu'elle soit compilée avant que le corps ne soit analysé et que les images soient chargées. Si vous insérez une fonction en bas de page, il y a de fortes chances que les images se chargent avant la définition de la fonction.

En utilisant mot-clé nous pouvons l'envoyer brut Objet DOM images à votre Fonction JavaScript comme argument :

function imgLoaded(img)( var $img = $(img); $img.parent().addClass("loaded"); );

fonction imgLoaded(img) ( var $img = $(img); $img. mère(). addClass("chargé");

Ou avec un simple JavaScript :

function imgLoaded(img)( var imgWrapper = img.parentNode; imgWrapper.className += imgWrapper.className ? "chargé" : "chargé"; );

fonction imgLoaded(img) ( var imgWrapper = img . noeudparent ; imgWrapper. nom de classe += imgWrapper . Nom de classe ? " chargé" : "chargé" ;

En utilisant javascript, vous pouvez rapidement parcourir le DOM d'un niveau vers le haut et ajouter une classe chargée à l'élément wrapper contenant. Je suis sûr que vous conviendrez qu'il s'agit d'une solution étonnamment élégante. En stylisant sélectivement cette classe, vous pouvez désormais afficher votre image chargée en définissant son opacité sur 1 :

Img_wrapper.loaded img( opacité : 1 ; )

img_wrapper. image chargée ( opacité : 1 ;

Pour que le processus se déroule sans problème, nous ajouterons quelques transitions CSS3 à l'image et obtiendrons un effet de « fondu entrant » lors du chargement de notre image.

Img_wrapper img( position : absolue ; haut : 0 ; largeur : 100 % ; opacité : 0 ; -webkit-transition : opacité 150 ms ; -moz-transition : opacité 150 ms ; -ms-transition : opacité 150 ms ; transition : opacité 150 ms ; )

Img_wrapper img ( position : absolue ; haut : 0 ; largeur : 100 % ; opacité : 0 ; Webkit - transition : opacité 150ms ; Moz - transition : opacité 150 ms ; Ms - transition : opacité 150ms ; transition : opacité 150 ms ;

Voir un exemple fonctionnel sur codepen.io comprenant version alternative avec affichage du spinner de chargement.

JPG progressifs

En guise de remarque sur cette technique, et en réponse à certains des commentaires que j'ai reçus sur cet article, il vaut vraiment la peine de mentionner les JPG « progressifs ». Il s'agit d'une autre technique ancienne remontant aux années 1990, consistant à stocker les fichiers JPG comme étant « progressifs » plutôt que « réguliers » afin d'éviter le chargement ligne par ligne - et à restituer l'image image par image à la même hauteur qu'elle. charges. Le principal avantage de cette technique est qu’elle empêche le contenu entrant de parcourir la page lors du chargement des images.

Que des effets tels que le chargement des spinners et le fondu d'entrée soient ennuyeux est une question de goût personnel, mais en général, l'astuce d'emballage div résout ces problèmes avec un minimum de CSS et de JavaScript..

La meilleure chose à propos de l'utilisation de la technique d'encapsulation div est que vous n'avez pas à vous soucier de modifier la hauteur de vos images lors de leur chargement, et vous n'avez pas à soumettre vos utilisateurs au vilain regroupement de pixels que je pense. tellement frustrant pour l'utilisateur aussi irritable. téléchargement normal. De plus, cela ne coûte rien : le processus de réaffichage d'une image plusieurs fois exerce en réalité une pression supplémentaire sur les appareils à faible consommation. appareils mobiles. Que des effets tels que le chargement des spinners et des fondus soient ennuyeux est une question de goût personnel, mais généralement l'astuce d'emballage div résout ces problèmes avec un minimum de CSS et de JavaScript, et il n'est pas nécessaire de compter sur l'utilisateur (dans une situation CMS) lors de l'enregistrement. Les JPG d'une certaine manière.

2. Téléchargez par lots plusieurs images

La technique ci-dessus est très bonne pour images individuelles, mais que se passe-t-il si nous avons une sélection d'images que nous souhaitons afficher dans un carrousel ou un diaporama, ou si nous utilisons un plugin de mise en page comme Masonry ? Erreur courante lors de l'utilisation de plugins carrousel/slider, ils sont traités lorsqu'ils sont prêts pour le document, souvent avant que toutes leurs images ne soient chargées. Cela peut faire passer le diaporama à une image vierge qui n'a pas encore été chargée, surtout s'il s'agit de photos haute résolution avec des fichiers de grande taille.

Pour éviter ce phénomène, vous devez traiter votre plugin préféré uniquement lorsque toutes les images nécessaires ont déjà été chargées. En utilisant une variante de la technique ci-dessus, nous ajouterons à nouveau un attribut onload à toutes les images de notre diaporama :

NB : Le balisage ci-dessous est fourni uniquement à titre d'exemple simplifié du balisage du plug-in de diaporama et doit être personnalisé en fonction de vos besoins.

< div id = "Slideshow" > < img src = "slide_1.jpg" alt = "" onload = "slideLoaded(this)" / > < img src = "slide_2.jpg" alt = "" onload = "slideLoaded(this)" / > < img src = "slide_3.jpg" alt = "" onload = "slideLoaded(this)" / > < / div >

En JavaScript, nous utiliserons la fonction slideLoaded() pour suivre le processus de chargement de l'image et exécuterons notre plugin lorsqu'il sera prêt :

fonction slideLoaded(img)( var $img = $(img), $slideWrapper = $img.parent(), total = $slideWrapper.find("img").length, percentLoaded = null; $img.addClass("chargé "); varloaded = $slideWrapper.find(".loaded").length; if(loaded == total)( percentLoaded = 100; // INITIALISEZ LE PLUGIN $slideWrapper.easyFader(); ) else ( // SUIVEZ LE PROCESS percentLoaded = chargé/total * 100 );

fonction slideLoaded(img) ( var $img = $(img) , $ slideWrapper = $ img. mère(), total = $slideWrapper . trouver ("img" ) . longueur pourcentageChargé = null ; $img. addClass("chargé"); var chargé = $slideWrapper . trouver(".chargé"). longueur ; si (chargé == total) ( pourcentageChargé = 100 ; // INITIALISE LE PLUGIN $slideWrapper. easyFader(); ) autre ( // SUIVEZ LE PROCESSUS percentLoaded = chargé / total * 100 ;

Chaque fois que nous chargeons un matériau, nous y ajoutons une classe chargée pour suivre sa progression.
Avec le dernier si on initialise le plugin (en dans ce cas jQuery EasyFader) lorsque le nombre d'images avec la classe chargée est égal au nombre total d'images dans le conteneur. En tant que propriété supplémentaire, vous pouvez diviser la variable chargée en variable totale et l'utiliser pour visualiser la progression des utilisateurs : soit en affichant pourcentage, ou l'utiliser pour contrôler la largeur de la barre de progression, ou d'autres choses similaires.

Encore une fois, ce script doit être placé dans l'en-tête de votre document, après jQuery et quel que soit le plugin que vous traiterez lorsque vous serez prêt.

3. Pré-mise en cache des images pour plus de rapidité

Sur les sites avec un grand nombre images, vous pouvez réduire légèrement la charge lors du téléchargement d'images en chargement en arrière-plan images dans le cache du navigateur pendant que l'utilisateur navigue sur la page.

Par exemple, disons que j'ai un site multipage sur lequel chaque page secondaire comporte une image haute résolution en haut. Au lieu de faire attendre l'utilisateur que toutes ces images se chargent à chaque fois qu'il accède à page séparée, vous pouvez les charger dans le cache avant que l'utilisateur n'atteigne la page. Commençons par mettre leurs URL dans un tableau :

var heroArray = [ "/uploads/hero_about.jpg", "/uploads/hero_history.jpg", "/uploads/hero_contact.jpg", "/uploads/hero_services.jpg" ]

var heroArray = [ "/uploads/hero_about.jpg" , "/uploads/hero_history.jpg" , "/uploads/hero_contact.jpg" , "/uploads/hero_services.jpg"

En règle générale, j'utiliserais mon CMS ou tout autre backend sur lequel je construis le site pour transmettre ces données sur la page elle-même sous la forme d'une balise de script dans le pied de page. De cette manière, la liste des images peut être mise à jour et étendue de manière dynamique.

Lorsqu'un utilisateur arrive sur la page d'accueil de mon site, je l'attends pleine charge, avant de faire quoi que ce soit, pour m'assurer de ne pas interrompre le chargement du contenu de la page elle-même en ajoutant un chargement tiers. Pour ce faire, j'attacherai la fonctionnalité JavaScript à l'événement windowload, qui se déclenche uniquement lorsque tout le contenu de la page a déjà été chargé et rendu (y compris les images), par opposition à l'événement document ready, qui se déclenche dès que le DOM est prêt :

function preCacheHeros())( $.each(heroArray, function())( var img = new Image(); img.src = this; ) ); $(window).load(function())( preCacheHeros(); ));

fonction preCacheHeros() ( $. chacun(heroArray, fonction()( var img = nouvelle image (); img. src = ceci ; } ) ; $(fenêtre). charger(fonction()( preCacheHeros(); } ) ;

Ou avec un simple JavaScript :

fonction preCacheHeros())( pour(i = 0; i< heroArray.length; i++){ var url = heroArray[i], img = new Image(); img.src = url; }; }; window.onload = preCacheHeros();

fonction preCacheHeros() ( pour (je = 0 ; je< heroArray . length ; i ++ ) { var url = heroArray[i], img = nouvelle image (); img. src = url ; fenêtre. onload = preCacheHeros () ;

À l'aide d'une boucle, nous parcourons le heroArray, créant un objet image vide à chaque itération, puis définissons l'URL sur l'attribut src de notre image. Cela charge l'image dans le cache du navigateur pour la session en cours afin que lorsque l'utilisateur visite réellement la page sur laquelle l'image est présentée, elle apparaisse instantanément.

Malheureusement, même si la pratique pré-mise en cache accélère les temps de chargement et améliore l'expérience utilisateur côté client, cela augmente en fait la charge sur le serveur. Dans ce cas, il est logique de prendre en compte les analyses de votre site avant d'effectuer une mise en cache préliminaire. Si la plupart vos utilisateurs accèdent page d'accueil votre site et quittez-le avant de visiter les pages secondaires, le coût demandes supplémentairesà votre serveur peut contrebalancer les avantages présentés aux quelques utilisateurs restants.

Il est logique de prendre en compte les analyses de votre site avant de mettre en œuvre la pré-mise en cache.

Précache précognitive

Cependant, si vous souhaitez vraiment utiliser la pré-cache, je vous recommande de diviser les images en groupes importants, stratégiquement placé sur le site. Par exemple, sachant que la grande majorité des utilisateurs qui restent sur le site iront sur la page secondaire après avoir visité la page d'accueil, je mettrais en pré-cache les images de la page principale de la page secondaire pendant qu'elles sont sur la page d'accueil.

Imaginons cependant que chacun de mes articles de blog comporte également une image haute résolution. Les mettre en cache pendant que le visiteur est sur la page d'accueil sera non seulement un grand succès côté serveur, mais cela peut également être un gaspillage de ressources puisque, disons, seulement 15 % des utilisateurs visitant la page d'accueil cliqueront pour y accéder. l'article du blog. Le meilleur endroit Il peut s'agir d'une page de destination pour la pré-mise en cache des images de blog si vous savez que presque tous les utilisateurs passeront de là à l'article de blog.

C'est ce qu'on appelle la pré-cache précognitive, dans laquelle nous utilisons les statistiques de nos analyses pour prédire les modèles de comportement à mesure que nos utilisateurs se déplacent sur le site. Cela peut paraître un peu fantastique, mais vous serez surpris de voir avec quelle précision vous pouvez prédire le flux de visiteurs et en faire votre avantage (et celui de vos utilisateurs).

Cela peut paraître un peu fantastique, mais vous serez surpris de voir avec quelle précision vous pouvez prédire le flux de visiteurs.

4. Chargement paresseux des images pour réduire la charge du serveur

Le concept de chargement paresseux fait référence aux images chargées par programmation après un événement spécial pour empêcher le navigateur de demander et d'afficher toutes les images de la page dès le chargement du document.

Principalement utilisé sur des pages longues ou riches en images. Sur page de destination Sur le blog Barrel, nous combinons le chargement paresseux avec le plugin MixItUp pour garantir que les images qui ne sont pas dans le filtre ou la page actuelle ne se chargent pas inutilement jusqu'à ce que cet élément soit visible. Nous encapsulerons à nouveau toutes les images soumises à un chargement paresseux dans un div avec la classe img_wrapper, qui à son tour recevra la classe lazy_load afin que nous puissions facilement les sélectionner à l'aide de jQuery :

) . charger(fonction()(

paresseuxLoad();

La fonction ci-dessus charge paresseusement toutes les images après le déclenchement de l'événement de chargement de fenêtre, mais le code à l'intérieur de la boucle .each() peut être adapté à diverses situations. Une utilisation très courante consiste à s'attacher à l'événement de défilement de la fenêtre et à charger paresseusement les images pendant qu'elles défilent vers la fenêtre.

Continuer avec le téléchargement des images

En train d'expérimenter quelques-unes de ces techniques sur une variété de projets au cours des 12 derniers mois environ, j'ai dû vraiment les réduire et les perfectionner pour les utiliser dans un projet Barrelny.com récemment repensé (relâché dans le monde en April), où j'ai utilisé une combinaison des quatre techniques pour garantir que les images se chargent correctement tout en essayant d'exploiter chaque once de performance d'un site Web extrêmement riche en photos et en images. En combinant la pré-cache et le chargement paresseux avec le chargement de page à Aide AJAX, diaporamas et pagination côté client, nous avons pu créer une grande impression de fluidité et d'ensemble du site.

En essayant de distiller ces techniques pour une présentation par l'équipe de développement de Barrel, j'ai été agréablement surpris par la légèreté de ces techniques sur papier (généralement 5 à 10 lignes de code dans jQuery) et par la facilité avec laquelle elles sont mises en œuvre dans n'importe quel projet. De plus, chacun d'eux peut être écrit en utilisant du JavaScript simple sans tracas inutiles et code supplémentaire, mais si vous utilisez jQuery, comme nous le faisons souvent, vous devez absolument profiter de ses techniques robustes de traversée du DOM.

Ces techniques sont sans aucun doute le seul moyen exécutent leurs fonctionnalités respectives, mais ils peuvent être facilement adaptés aux frameworks et plugins existants. Si vous n’avez pas encore envisagé de télécharger des images, j’espère que vous le ferez maintenant ! Pourquoi ne pas en appliquer un ou deux à votre prochain projet ?

Lorsque vous créez une galerie sur un site Web, vous devez charger les images à l'avance afin qu'il n'y ait pas d'erreurs dans les scripts ou que l'utilisateur ne voie pas de morceaux d'images sous-chargées.

À une époque, je cherchais un bon préchargeur à ces fins, mais je n'ai pas trouvé de solution qui me satisferait complètement. J'ai dû écrire le mien.

Il contient fonctionnalité de base, qui permet d'effectuer deux fonctions principales : charger des images puis appeler un rappel. Mais il a aussi ses propres fonctionnalités. Il peut charger les images une par une dans l'ordre dans lequel elles ont été placées dans le tableau. Pas seulement un à la fois, mais deux-trois-N. Et pour chaque itération de chargement, un rappel peut être exécuté. Mais ce n'est pas tout : après le chargement de la dernière image, le rappel final sera exécuté, indiquant que toutes les images ont été chargées.

Usage

Il existe deux options pour utiliser jQuery.preload.
La première consiste à transmettre la ou les adresses des images :

$.preload(images, , );

• photos
  L'adresse de l'image peut être saisie sous forme de chaîne (pour une image) ou sous forme de tableau.
• partie
  Vient ensuite paramètre facultatif, indiquant le nombre d'images à charger à la fois. 0 signifie tout à la fois, la valeur par défaut.
• rappel
  Et enfin, le callback est une fonction qui sera exécutée une fois l’image chargée. Vous pouvez lui spécifier votre dernier paramètre, qui accepte vrai, si cette partie est la dernière.

Le deuxième cas d'utilisation consiste à télécharger toutes les images et images de fond en élément :

$("#elem").preload();

• rappel
  Une fonction qui sera exécutée une fois que toutes les images auront été chargées.

Exemples

• — les images seront chargées une par une, après avoir chargé chacune d'elles, le rappel se déclenchera, et après avoir chargé la dernière, le rappel final se déclenchera.
• — le rappel affiche les images précédemment masquées mais déjà chargées.

Pour bon fonctionnement plugin requis Versions de jQuery 1.6 ou supérieur.

Les images, de bonne qualité, sont le principal avantage du site. Mais le principal problème de l'utilisation des images est leur taille : généralement elle représente au moins 50 % de la taille du site et au moins 300 Ko d'images sont compilés sur chaque page (c'est la quantité d'informations sur téléphone mobile Se charge en 1,5 seconde environ ordinateur de bureau- 0,2-0,3 secondes).

Que faire avec eux ?

Images séquentielles et PNG

Le problème de la taille des images est déjà très ancien et bien étudié. Le mieux que vous puissiez faire pour le moment est d'utiliser un mode progressif (séquentiel) Format JPEG pour les images en couleur (photos) et Format PNG pour tous les autres fichiers (par exemple, images d'arrière-plan ou icônes).

Les images séquentielles permettent d'afficher l'essence d'une image le plus rapidement possible : elles sont chargées séquentiellement par l'utilisateur, améliorant progressivement la qualité de l'image. C'est meilleur choix lors de l'utilisation d'images en couleur sur tous les appareils - des mobiles et tablettes aux ordinateurs classiques.

Format PNG dû compression maximale les palettes et les représentations d'images indexées (avec un petit nombre de couleurs) peuvent transmettre même une grande image avec une petite quantité d'informations. Ceci est extrêmement critique pour l’efficacité de votre site : si vous ne pouvez pas dégrader la qualité des informations présentées, vous pouvez alors réduire la taille de ces informations au minimum.

Chargement paresseux

L'étape suivante pour optimiser la taille des informations téléchargées consistait à télécharger les images nécessaires uniquement pour afficher le premier écran du site. Par exemple, si vous avez un catalogue contenant des dizaines d’articles, mais que seulement 8 d’entre eux tiennent sur le premier écran, il serait raisonnable de télécharger d’abord seulement 8 images. Cela (visuellement) accélérera considérablement le chargement complet de la page du site. Et lorsque l'utilisateur fait défiler la page davantage, il charge toutes les images des autres parties de la page. En même temps, affichez un indicateur de chargement à la place des images de chargement.

Existe quantité énorme solutions qui, d'une manière ou d'une autre, implémentent cette méthode - lazyload - vous pouvez facilement trouver un plugin qui vous convient et l'installer. Cette approche présente cependant quelques inconvénients : l'utilisateur doit attendre en faisant défiler la page jusqu'à ce que les images « différées » soient chargées et l'implémentation du plugin peut ne pas être tout à fait correcte, ce qui entraînera un ralentissement du site sur tous les appareils. De plus, vous devez vous assurer que les images du code de la page sont accessibles aux robots de recherche.

Ce n’est pas une tâche facile, n’est-ce pas ?

Améliorer le chargement paresseux

Il existe plusieurs implémentations de lazyload - en particulier unveil - qui ont contourné le premier inconvénient : le chargement des images peut être retardé exactement jusqu'au moment où nous montrons à l'utilisateur le site « prêt » (généralement c'est le moment où la structure de la page est prête - DOMready - mais parfois la page est complètement chargée - onload). Et nous commencerons à charger toutes les images immédiatement après cet événement. Si l'utilisateur consacre 2 à 3 secondes à la première connaissance du contenu de la page, le chargement des images passera presque inaperçu (le navigateur indiquera déjà que la page est prête). Si l'utilisateur parvient toujours à commencer à visualiser la page avant que toutes les images ne soient chargées, alors à la place des images au lieu de l'icône du navigateur par défaut ou espace vide il y aura un indicateur de chargement.

C’est une solution assez élégante, mais elle peut être encore améliorée si vous adoptez une approche plus prudente dans la séquence de chargement des pages du site. Déterminez quels widgets sont chargés et quand : afin qu'ils n'interfèrent pas avec le processus de chargement des images. Placez les images sur 1 à 2 sous-domaines, s'il y en a plus de 30 - ce sera le cas effet positif du chargement parallèle des images. Il est possible de déplacer certaines images vers l'événement de chargement complet et d'autres vers l'événement de préparation de la structure de la page. En général, examinez le processus de chargement du site plus en détail et optimisez perception des utilisateurs- pour rendre le site réactif.

Pré-chargement des images (prélecture)

La communauté technique ne s'est pas arrêtée là et est allée plus loin dans l'optimisation du processus de chargement des images. Et si nous pouvions prédire la prochaine action de l'utilisateur sur le site - et charger immédiatement les ressources requises (et les plus importantes d'entre elles sont les images) ? Comment cela peut-il être fait ?

Technique précharger Les images (préchargement ou prélecture) sont activement utilisées dans diverses galeries d'images - par exemple, Yandex.Photos - pendant que vous visualisez une image, le navigateur charge déjà deux ou trois précédentes et deux ou trois suivantes. Et il les montrera presque instantanément après avoir reculé ou avancé. Et ce sera réactif !

Pour une boutique en ligne, vous pouvez utiliser la même technique lors de la navigation marchandises individuelles- chargement immédiat des images de la galerie ou de produits similaires du service de recommandation. Cela réduira le volume informations transmises du site à l'utilisateur après avoir parcouru nouveau lien et accélérer visuellement le site.

Conclusion et liste d'actions

Donc la masse informations utiles. Que devons-nous faire exactement ? Vous devez parcourir la liste suivante et vérifier si tout va bien sur votre site. Dans le cas contraire, prenez les mesures appropriées :

Les images en couleur sont-elles créées au format JPEG séquentiel ? Si ce n'est pas le cas et que vous pouvez enregistrer des images avec une perte de qualité, vous devez alors configurer ce format.

Toutes les autres images sont-elles en PNG ? Sinon, vous devez configurer ce format particulier. De plus, il est recommandé d'optimiser les images PNG par lots ou à l'aide de services.

Toutes les images sont-elles affichées en taille naturelle ? Souvent dimensions physiques(hauteur et largeur) de l'image taille plus grande image visible. Cela conduit à une qualité rudimentaire et vous oblige à télécharger beaucoup plus de données que nécessaire. Redimensionnez les images à celles utilisées sur le site (si nécessaire, créez des doublons dans d'autres tailles).

Y a-t-il plus de 20 images sur la page et elles ne tiennent pas sur les deux premiers écrans ? Vous devez utiliser une sorte de solution de chargement différé pour réduire la quantité d'informations initialement chargées.

En plus des images, le site utilise-t-il plusieurs widgets et codes statistiques ? Vérifiez le tableau de chargement de votre site pour vous assurer que les images précieuses à chargement différé sont d'abord livrées à l'utilisateur.

Avez-vous besoin d’accélérer votre site Web autant que possible et toutes les étapes ont déjà été effectuées ? Configurez le préchargement des images lors de la navigation dans les pages du site Web. Étudiez les scénarios d'utilisation du site - et ajustez la logique de chargement des images en fonction de ceux-ci.

C'est essentiellement tout. Il convient de rappeler qu'Airi réduit automatiquement les images à la taille minimale et meilleur format sans perte de qualité, et peut également définir dynamiquement tailles correctes pour les images et différer leur chargement.

Lorsque vous êtes engagé dans la mise en page et que vous créez toutes sortes d'astuces avec des images (généralement avec substitution en survol ou même leur animation), une telle nuance apparaît toujours comme un chargement retardé d'une image/image. A première vue, le problème n'est pas si grave et, dès le chargement des images, tout fonctionne bien, mais c'est la première fois effet de survol, qui tente de charger une image et de la remplacer en même temps, crée un effet saccadé qui souvent n'est pas très joli et peut gâcher la première impression des utilisateurs de votre site.

Avec l'animation, les choses sont encore pires. Imaginez, par exemple, que vous deviez implémenter dans JS (JQuery) une voiture de tourisme qui passe, qui est remplacée au bout de 2 secondes par un bus. Les images avec la voiture et le bus sont différentes. Dans le même temps, ils ne commenceront à se charger qu'au moment où le navigateur recevra un lien vers eux avec la possibilité de charger ( c'est-à-dire au début de l'animation). Le chargement d'une telle image prendra quelques secondes. Autrement dit, il s'avère que pendant la moitié de l'animation de deux secondes, cette image ne sera chargée que - ce n'est pas l'ordre.

Mais tout cela peut être corrigé en préchargeant ( précharger) images, ce qui vous permet de charger une image dans le tampon immédiatement lors du chargement de la page principale ( ou même avant ça). C'est ce dont je veux parler dans cet article.

Préchargement d'images en JavaScript (JQuery)L'option de chargement en JS, à mon avis, est l'une des meilleures, surtout si vous avez affaire à de l'animation. Son essence est que vous créez simplement une copie de l'image à l'aide de JavaScript et la chargez dans le tampon du navigateur. Ainsi, si nécessaire, vous n'aurez plus besoin de charger l'image, car elle sera déjà préchargée.

Cela semble compliqué ? =) Mais cela ressemble à ce code, où vous devez remplacer le chemin d'accès à l'image par le vôtre et tout fonctionnera :

//créer fonction jQuery, qui chargera les images dans le tampon jQuery.preloadImages = function() ( for(var i = 0; i< arguments.length; i++) { jQuery("").attr("src", arguments[ i ]); ) ); //spécifie le chemin d'accès à l'image qui doit être chargée $.preloadImages("/tpl/testimg.png");

Si vous devez charger plusieurs images, vous pouvez simplement les lister séparées par des virgules, comme ceci :

$.preloadImages("imageone.jpg", "dirname/imageok.jpg", "/tpl/testimg.png");

Il peut y avoir n'importe quel nombre d'images. L'essentiel est de ne pas oublier la fonction JQuery, sans laquelle le préchargement ne fonctionnera pas.

Cette méthode présente également des inconvénients, comme le fait qu'elle dépend de l'activation ou non de JS dans le navigateur de l'utilisateur. Mais d'après expérience personnelle Je dirai que si vous vous comparez à ceux qui ont désactivé JS, alors technologies modernes De nombreuses créations de sites Web ne seront pas possibles à mettre en œuvre. Et je pense qu'il n'y a pas tellement d'utilisateurs de ce type. En général, vous devez suivre la majorité, et la majorité ne personnalise pas autant le navigateur.

Personnellement, je préfère utiliser cette méthode de chargement dans de nombreux projets car elle est pratique à mettre en œuvre.

Précharger des images à l'aide des nouvelles fonctionnalités HTML5 Cette méthode est relativement nouvelle car la technologie HTML5 elle-même a été lancée il n'y a pas si longtemps. Son essence est que vous mettez un lien vers l'image via la balise link et dans l'attribut rel ( type d'élément chargé) vous indiquez qu'il s'agit d'un préchargement. Ainsi, le navigateur voit cette balise et charge automatiquement l'image dans le tampon.

Cela se fait en ajoutant à code HTML comme cette balise ( remplacez simplement le lien vers l'image par le vôtre):

Ici, rel contient 2 paramètres : pré-rendu- pour Sa Majesté Chrome et prélecture- pour les autres navigateurs. Si vous souhaitez télécharger plus grand nombre images, puis copiez la balise et remplacez le lien quantité requise une fois:

L'avantage de cette méthode est que la désactivation de JS n'affectera en rien le préchargement, mais personnellement je vois 2 inconvénients évidents :
1) La technologie HTML5, et donc cette méthode de préchargement, n'est pas supportée par tous les navigateurs. Aujourd’hui, cependant, les navigateurs sont mis à jour et la plupart des navigateurs en développement modernes reconnaissent HTML5, mais cela est encore loin d’être idéal.
2) Plus lourd contrairement à l'implémentation JS, car chaque image devra être décrite avec une balise distincte ( et avec différents paramètres rel pour obtenir quelque chose de proche de la compatibilité entre navigateurs).

En général, je pense que cette méthode est prometteuse, mais elle prend du temps. Pour l’instant, il manque de polyvalence.

Préchargement d'images à l'aide de HTML éprouvéLa toute première idée qui vient généralement à l'esprit est HTML pur- il s'agit de créer un bloc div avec Paramètre CSS "affichage : aucun ;", il y a une image dedans et cela devrait devenir un préchargement. Cela ne fonctionne pas réellement, le navigateur ne commencera à se charger dans le tampon que lorsque l'affichage deviendra autre chose que rien.

Mais j'ai trouvé un moyen d'utiliser des astuces CSS. Je vais vous en dire plus sur lui.

Placement dans un bloc invisible via Opacité CSS et position (positionnement) CSS a une telle propriété - l'opacité. Son but est de modifier la transparence et vous pouvez réduire la transparence à zéro. De plus, CSS a également propriété de position, qui est nécessaire pour positionner l'élément sur la page ( vous pouvez déplacer un bloc d'informations pixel par pixel n'importe où dans et au-delà de la visibilité de la page). Tout cela nous sera utile :

Ainsi, nous obtenons un bloc invisible avec une image, qui se trouve également à l'extérieur visible pour l'utilisateur information. Ce type de positionnement en dehors de l'écran, d'ailleurs, est souvent utilisé s'ils veulent créer une sorte de bloc invisible. J'ai souvent vu comment les liens vers ; modèles gratuits exactement de cette façon. Donc tu sais tout =)

Si vous souhaitez précharger plusieurs images de cette manière, indiquez-les simplement à l'intérieur bloquer les divisions, comme ça:

Ce sont les méthodes de préchargement d’images qui peuvent être utilisées dans le développement de sites Web. Si vous avez d’autres idées, je serai ravi de les lire dans les commentaires.
Bonne chance à tous dans la mise en page et la création de l'animation ! =)