Maison > Article > interface Web > 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
- WBOYoriginal
- 2016-05-16 16:30:521488parcourir
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 :
- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript