2014-09-09 1 views
2

tous les visiteurs qui visitent ma page chargeriez une style.css qui contient cette ligne colorbox:préchargement des images de css, quelle est la règle qui les régit?

#cboxLoadingGraphic{background:url(/images/animation.gif) no-repeat center center} 

cette image d'animation ne doit afficher que lorsque vous cliquez sur un certain bouton sur la page, comme une animation de chargement affichée lors du chargement du modal colorbox fenêtre.

Pourtant, j'ai remarqué qu'il y a plusieurs visiteurs qui préchargent automatiquement animation.gif, même s'ils n'ont pas cliqué sur ce bouton (et n'ont pas ouvert la fenêtre modale). Mais comme cela se produit avec environ 1/3 des visiteurs, avec des browesers différents, je ne peux pas comprendre quelle est la règle qui régit, ce qui fait qu'un utilisateur le précharge, et un autre utilisateur le charge seulement quand il clique dessus le bouton dit?

+0

ne devriez-vous pas utiliser une requête pour modifier la classe css de l'élément affiché pour cette image d'arrière-plan en fonction de l'action de l'utilisateur, comme en cliquant sur le bouton? Cette fonction de js devrait prendre d'afficher cet élément sur le clic et le retirer/le cacher quand la fenêtre modale s'ouvre. – vreddy

+0

@viper pas sûr de ce que vous voulez dire, fondamentalement le tout est basé sur [cet exemple] (http://www.jacklmoore.com/colorbox/example2), cliquez sur "Outside HTML (AJAX)" et vous verrez cette animation loading.gif. – rockyraw

Répondre

0

Les règles sont quelque chose le long de ces lignes:

Peu importe ce que vous mettez dans votre css en termes ou des liens vers des images, car il (navigateur) ne chargera cette ressource si l'élément est sur la page et visible! Visible signifie tout sauf afficher: aucun et différents états de cet élément, disons: état hover.

Ceci ne s'applique pas aux images de base64 incorporées dans vos fichiers CSS. Ceux-ci chargent avec la feuille de style.