TUTORIAL: Preload images avec CSS

Introduction

Donc, vous voulez des images pré-charge? Il ya deux façons de le faire. Le premier est avec le Javascript, et vous mai s'inquiéter de ce que l'utilisateur a désactivé JavaScript dans son navigateur. La deuxième variante cependant, n'utilise que CSS et (X) HTML, et je vais vous montrer le CSS (X) HTML chemin.

Où il peut être utilisé

Disons que vous avez un site qui vend des colliers en diamants, et vous avez maintenant vu (à partir de votre panneau de contrôle ou toute autre source) que la plupart des utilisateurs entrent dans votre index / page d'accueil, puis ils continuent à la page "Produits", puis ils s'en vont, cette mai-être parce qu'ils arrivent sur la page des produits et ils ont à attendre pour les images à charger et cela prend trop longtemps, alors qu'est-ce bien est, précharge les images sur l'index / page d'accueil déjà, et quand ils arrivent sur la page "Produits", les images sont déjà chargés dans la mémoire cache, ou partiellement au moins.

Le CSS:

Le CSS pour cette solution est en effet très simple, si simple, il suffit d'une seule ligne de code, et que la ligne de code se présente comme suit:

Oui, c'est tout ce que vous devez ajouter dans votre fichier CSS à des images pré-charge. Ainsi, lorsque vous ajoutez une image avec cette classe de votre code HTML les images seront chargées dans la mémoire cache pour une utilisation future, mais ils ne seront pas affichés sur la page en raison de l'affichage ": none" qui permet de masquer les images de l'utilisateur.

Le (X) HTML

Donc, ici, nous allons avoir un regard sur le code de notre index / page d'accueil. Nous allons déjà de précharger les images sur cette page, de sorte que lorsque l'utilisateur accède à la page "Produits", les images sont déjà préchargés dans la mémoire cache. Cette partie devrait être placé à droite au bas de votre page, juste avant la balise </ body>, de cette façon, toutes les autres images sur la page se charge en premier et ensuite ceux qui ont besoin d'être préchargé pour la page suivante.

Conclusion

CSS donne une bien meilleure solution pour le préchargement des images, car il sera toujours rendu par le navigateur, où que Javascript peut être désactivé, et ce code est beaucoup plus facile à appliquer que Javascript.

Awesome righteous_trespasser...Je n'ai pas pensé à faire ça. Pourquoi ne pas le faire dans un div?

Yeah travaux qui pourraient ainsi...alors que vient de mettre toute la div "display: none"...

Salut,
Je ne suis pas au courant de la CSS. Donc, s'il vous plaît dites-moi comment vais-je créer une page à l'aide de CSS?

Voilà une bonne idée youve got là, mais à partir d'un point de vue de l'accessibilité, JavaScript peut-être mieux: si un navigateur ne supporte pas le JavaScript, (ou les personnes handicapées) les images ne seront pas pré-chargée - il n'y en a pas d'effets secondaires. D'autre part, si un navigateur ne supporte pas les CSS, l'utilisateur finit par voir ces images sur la page, chose que nous ne voulons peut-être - le but de XHTML / CSS est de rendre les pages plus accessibles, en séparant le contenu réel de la mise en forme, donc vous devriez essayer d'éviter d'ajouter des trucs en HTML qui ne fait pas partie des pages de contenu réel.

...mais si le navigateur ne supporte pas les css, l'ensemble de mon site ne fonctionne pas à tous? tout mon style est fait en css....... Je pense que la plupart des peuples, ces jours-ci. ce que les navigateurs ne supportent pas les css?

semble de toute façon brillante et simple R_T - Ill certainement lui donner un rapport avec le jardin botanique site. Merci!

Si les utilisateurs quittent la page des produits, car les images se chargent trop lentement, et vous place au lieu de ces images sur la page d'accueil - les mêmes utilisateurs wouldnt laisser le site à partir de la page d'accueil?

Présentation de code dans une page thats n'a jamais eu l'intention d'être vu est sémantiquement incorrecte, et d'une meilleure solution serait d'optimiser les images ou de diviser la page en petits pages, si il y en a trop d'images.