Préchargement des Images d'arrière-plan CSS

Question

Préchargement des Images d'arrière-plan CSS

Demandé el 3 de Septembre, 2009: Quand la question a-t-elle été
40595 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai caché un formulaire de contact qui est déployé en cliquant sur un bouton. Ses champs sont définis comme CSS, images de fond, et ils semble toujours un peu plus tard que la div qui ont été basculés.

J'ai été en utilisant ce fragment dans l' <head> section, mais avec pas de chance (après j'ai vidé le cache) :

<script type="text/javascript">
$(document).ready(function() {
    	pic = new Image();
    	pic2 = new Image();
    	pic3 = new Image();
    	pic.src="<?php bloginfo('template_directory'); ?>/images/inputs/input1.png";
    	pic2.src="<?php bloginfo('template_directory'); ?>/images/inputs/input2.png";
    	pic3.src="<?php bloginfo('template_directory'); ?>/images/inputs/input3.png";
});
</script>

Je suis à l'aide de jQuery que ma bibliothèque, et ça serait cool si je pouvais l'utiliser aussi bien pour l'organisation de cette question.

Merci pour votre thoughs.

Demandé el 3 de Septembre, 2009 par Peanuts

Answer 1

5 Réponses

Answer 2

318voto

vsync Points 11280

Le préchargement des images à l'aide de CSS

body:after{
    display:none;
    content: url(img01.png) url(img02.png) url(img03.png) url(img04.png);
}

Mais il est préférable d'utiliser une image sprite afin de réduire les requêtes http...
(si il y a beaucoup de relativement petite taille des images)

Répondu el 17 de Janvier, 2013 par vsync (11280 Points )

Answer 3

36voto

Peanuts Points 530

Je peux confirmer que mon code d'origine semble fonctionner. J'ai été par hasard coller à une image avec un mauvais chemin.

Voici un test : http://paragraphe.org/slidetoggletest/test.html

<script>
  pic = new Image();
  pic2 = new Image();
  pic3 = new Image();
    pic.src="images/inputs/input1.png";
    pic2.src="images/inputs/input2.png";
    pic3.src="images/inputs/input3.png";
</script>

Répondu el 3 de Septembre, 2009 par Peanuts (530 Points )

Answer 4

15voto

Fatih Hayrioğlu Points 813

http://css-tricks.com/snippets/css/css-only-image-preloading/

Technique n ° 1

Charger l'image sur l'élément régulier de l'état, qu'à bouger à fond. Déplacez ensuite le fond de la position de l'afficher sur le vol stationnaire.

#grass { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background-position: bottom left; }

Technique n ° 2

Si l'élément en question a déjà une image de fond d'écran appliquée et vous avez besoin de changer cette image, le ci-dessus ne fonctionne pas. En général, vous allez pour un sprite ici (un combiné image d'arrière-plan) et il suffit de déplacer la position de fond. Mais si ce n'est pas possible, essayez ceci. Appliquer l'image d'arrière-plan à un autre élément de la page qui est déjà en cours d'utilisation, mais ne dispose pas d'une image d'arrière-plan.

#random-unsuspecting-element { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background: url(images/grass.png) no-repeat; }

Répondu el 6 de Janvier, 2011 par Fatih Hayrioğlu (813 Points )

Answer 5

10voto

mck89 Points 8661

essayez avec ceci:

var c=new Image("Path to the background image");
c.onload=function(){
   //render the form
}

Avec ce code, vous précharger l'image d'arrière-plan et de rendre le formulaire lorsqu'il est chargé

Répondu el 3 de Septembre, 2009 par mck89 (8661 Points )

Answer 6

5voto

ajhit406 Points 962

Si vous êtes à la réutilisation de ces bg images n'importe où ailleurs sur votre site pour les entrées de formulaire, vous voudrez probablement utiliser une image sprite. De cette façon, vous pouvez gérer de manière centralisée vos images (au lieu d'avoir pic1, photo 2, photo 3, etc...).

Les Sprites sont généralement plus rapide pour le client, car ils sont seulement la demande (un peu plus) de fichiers à partir du serveur au lieu de plusieurs fichiers. Voyez DONC l'article pour plus d'avantages:

http://stackoverflow.com/questions/1289372/css-image-sprites

Alors encore une fois, cela peut ne pas être utile à tous, si vous êtes tout simplement à l'aide de ces pour un formulaire et vous avez vraiment ne voulez charger si l'utilisateur demande le formulaire de contact...pourrait faire sens.

http://www.alistapart.com/articles/sprites

Répondu el 3 de Septembre, 2009 par ajhit406 (962 Points )

Préchargement des Images d'arrière-plan CSS

Réponses

Le préchargement des images à l'aide de CSS

Questions en vedette

Top Tags

Prograide.com

Powered by:

Préchargement des Images d'arrière-plan CSS

Réponses

Le préchargement des images à l'aide de CSS

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: