interface Web
js tutoriel
Trois méthodes principales pour réaliser le préchargement des images et l'analyse de leurs avantages et inconvénients_javascript skills
Trois méthodes principales pour réaliser le préchargement des images et l'analyse de leurs avantages et inconvénients_javascript skills
Le préchargement des images est un excellent moyen d'améliorer l'expérience utilisateur. Avec des images préchargées dans le navigateur, les visiteurs peuvent surfer en douceur sur votre site et profiter de temps de chargement incroyablement rapides. Ceci est très bénéfique pour les galeries d'images et les sites Web où les images occupent une grande proportion. Cela garantit que les images sont publiées rapidement et de manière transparente, et aide également les utilisateurs à bénéficier d'une meilleure expérience utilisateur lorsqu'ils parcourent le contenu de votre site Web. Cet article partagera trois techniques de préchargement différentes pour améliorer les performances et la convivialité du site Web.
Méthode 1 : Utiliser CSS et JavaScript pour implémenter le préchargement
Il existe de nombreuses façons d'implémenter des images préchargées, notamment en utilisant CSS, JavaScript et diverses combinaisons des deux. Ces technologies peuvent concevoir des solutions correspondantes selon différents scénarios de conception et sont très efficaces.
En utilisant simplement CSS, vous pouvez précharger des images facilement et efficacement. Le code est le suivant :
#preload-01 { background : url(http://domain.tld/image-01.png) no-repeat -9999px -9999px }
#preload-02 { background : url(http://domain.tld/image-02.png) no-repeat -9999px -9999px }
#preload-03 { background : url(http://domain.tld/image-03.png) no-repeat -9999px -9999px }
En appliquant ces trois sélecteurs d'ID à l'élément (X)HTML, nous pouvons précharger l'image sur l'arrière-plan hors écran via l'attribut CSS background. Tant que les chemins d'accès à ces images restent les mêmes, le navigateur utilisera les images préchargées (mises en cache) pendant le processus de rendu lorsqu'elles seront appelées ailleurs sur la page Web. Simple, efficace et ne nécessite aucun JavaScript.
Bien que cette méthode soit efficace, elle peut encore être améliorée. Les images chargées à l'aide de cette méthode seront chargées avec d'autres contenus sur la page, augmentant ainsi le temps de chargement global de la page. Pour résoudre ce problème, nous avons ajouté du code JavaScript pour retarder le temps de préchargement jusqu'à ce que la page soit chargée. Le code est le suivant :
// meilleur préchargement des images @ http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/">http : //perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/> function preloader() {
Si (document.getElementById) {
document.getElementById("preload-01").style.background = "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px";
document.getElementById("preload-02").style.background = "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px";
document.getElementById("preload-03").style.background = "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px";
}
}
function addLoadEvent(func) {
var oldonload = window.onload; If (typeof window.onload != 'function') {
window.onload = func; } autre {
window.onload = function() { window.onload = function() Si (oldonload) {
oldonload(); func(); }
}
addLoadEvent(préchargeur);
Dans la première partie du script, nous récupérons l'élément à l'aide du sélecteur de classe et définissons l'attribut background dessus pour précharger différentes images.
Dans la deuxième partie du script, nous utilisons la fonction addLoadEvent() pour retarder le temps de chargement de la fonction preloader() jusqu'à ce que la page soit chargée.
Que se passe-t-il si JavaScript ne s'exécute pas correctement dans le navigateur de l'utilisateur ? C'est très simple. L'image ne sera pas préchargée. Lorsque la page appellera l'image, elle s'affichera normalement.
Méthode 2 : Utiliser JavaScript uniquement pour implémenter le préchargement
La méthode ci-dessus est parfois très efficace, mais nous avons progressivement constaté qu'elle prendrait trop de temps dans le processus de mise en œuvre proprement dit. Au lieu de cela, je préfère utiliser du JavaScript pur pour le préchargement des images. Vous trouverez ci-dessous deux méthodes de préchargement qui fonctionnent à merveille sur tous les navigateurs modernes.
Extrait JavaScript 1
Il suffit simplement de modifier et de charger le chemin et le nom de l'image requise, c'est facile à mettre en œuvre :
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Comment afficher correctement le 'Jingnan Mai Round Body' installé localement sur la page Web?
Apr 05, 2025 pm 10:33 PM
En utilisant récemment des fichiers de police installés localement dans les pages Web, j'ai téléchargé une police gratuite à partir d'Internet et je l'ai installée avec succès dans mon système. Maintenant...
Comment sélectionner un élément enfant avec l'élément de nom de première classe via CSS?
Apr 05, 2025 pm 11:24 PM
Lorsque le nombre d'éléments n'est pas fixé, comment sélectionner le premier élément enfant du nom de classe spécifié via CSS. Lors du traitement de la structure HTML, vous rencontrez souvent différents éléments ...
La production de pages H5 nécessite-t-elle une maintenance continue?
Apr 05, 2025 pm 11:27 PM
La page H5 doit être maintenue en continu, en raison de facteurs tels que les vulnérabilités du code, la compatibilité des navigateurs, l'optimisation des performances, les mises à jour de sécurité et les améliorations de l'expérience utilisateur. Des méthodes de maintenance efficaces comprennent l'établissement d'un système de test complet, à l'aide d'outils de contrôle de version, de surveiller régulièrement les performances de la page, de collecter les commentaires des utilisateurs et de formuler des plans de maintenance.
Comment compatible avec l'omission de débordement multi-lignes sur le terminal mobile?
Apr 05, 2025 pm 10:36 PM
Problèmes de compatibilité du débordement multi-rangs sur le terminal mobile omis sur différents appareils Lors du développement d'applications mobiles à l'aide de Vue 2.0, vous rencontrez souvent la nécessité de déborder de texte ...
Comment faire une barre de progression avec H5
Apr 06, 2025 pm 12:09 PM
Créez une barre de progression à l'aide de HTML5 ou CSS: créez un conteneur de barre de progression. Définissez la largeur de la barre de progression. Créez des éléments internes de la barre de progrès. Définit la largeur des éléments internes de la barre de progression. Utilisez la bibliothèque JavaScript, CSS ou Progress Bar pour afficher les progrès.
Comment modifier efficacement le style des éléments de div imbriqués?
Apr 05, 2025 pm 10:45 PM
Discussion approfondie sur les méthodes de modification du style Div imbriquées Cet article expliquera en détail comment modifier efficacement le style d'élément div des structures imbriquées. Le défi auquel nous sommes confrontés est de savoir comment ...
Quels scénarios d'application conviennent à la production de pages H5
Apr 05, 2025 pm 11:36 PM
H5 (HTML5) convient aux applications légères, telles que les pages de campagne de marketing, les pages d'affichage des produits et les micro-Websites de promotion d'entreprise. Ses avantages résident dans la plateformité multi-plateaux et une riche interactivité, mais ses limites résident dans des interactions et des animations complexes, un accès aux ressources locales et des capacités hors ligne.
Comment régler la bordure de la table H5
Apr 06, 2025 pm 12:18 PM
Dans HTML, définissez les bordures de la table H5 via CSS: introduisez une feuille de style CSS, style la bordure en utilisant les attributs de bordure (y compris les sous-propriétés de la largeur de la bordure, de la bordure et de la bordure des bordures) et appliquez le style aux éléments de la table. De plus, des styles de frontières spécifiques peuvent être définis, tels que la frontière, la frontière droite, la frontière et la frontière-gauche.
