Le tabou de pré-chargement des images JavaScript traditionnel
Je me souviens du bon vieux temps (pas vraiment) à l'époque où je suçais encore la tète de Dreamweaver pour créer des sites Web et l'attrait de la lecture de copypasta avec des scripts intégrés de fantaisie (ex, échange d'images) ressemblait à de la magie noire.
Je suis assez éloigné de cela maintenant, mais j’adaptais un petit site à partir de son format original FrontPage (:: cringe: :) à une implémentation HTML/CSS standard et je ne pouvais pas m'empêcher de me demander si implémenter le préchargement de l'image JavaScript dans la version actuelle? Ou y a-t-il un meilleur moyen?
Je ne veux pas empêcher le chargement de la page en demandant à l'utilisateur de demander à tous les éléments de la page en utilisant la méthode de préchargement JavaScript traditionnelle. J'apprécie de donner à l'utilisateur quelque chose à regarder le plus rapidement possible, et mon mojo Google pourrait être nuisible en le faisant.
Existe-t-il une solution plus propre pour éviter les retours de page inutiles lors du chargement? Tels que la définition des dimensions statique largeur/hauteur via un attribut de style CSS sur l'élément image.
La spécification des dimensions de l'image en HTML et/ou CSS a toujours été recommandée depuis HTML 2.0, et élimine le besoin de repositionner les pages en raison du retard du chargement des images. .
Cela prend soin des images statiques. L'autre cas concerne des images qui ne s'afficheront pas avant après le chargement de la page.
Pour des choses simples comme les effets de survol, vous devriez utiliser des images d’arrière-plan et le sélecteur CSS :hover, aFAIK sera préchargé dans la plupart des navigateurs modernes. Ou, mieux encore, utilisez sprites CSS , qui garantissent le préchargement et accélèrent le chargement des images en général.
Pour des choses plus avancées comme curseurs d'image , vous avez besoin de JavaScript. Pour ceux-là, dans la mesure du possible, je vous recommande d'utiliser un script existant qui se chargera du préchargement et d'autres détails techniques de manière efficace et bien testée.
Le préchargement des images utilisées dans d'autres pages peut être effectué sans interrompre le chargement de la page en cours. Vous pouvez charger les images supplémentaires après le chargement de tous les éléments de la page en cours.
Utilisez l'événement JavaScript window.onload (ou l'événement $ (window) .load si vous utilisez jQuery) pour commencer à charger les images nécessaires au rendu de la page suivante.