Problème script de préchargement d'images

Bonjour

J'ai l'habitude de précharger les images qui doivent apparaitre après un mouse over sur un élément.
Cependant dans le cas ci-dessous le préchargement ne fonctionne pas pour les images qui sont utilisées dans le jquery définie juste au dessus, les images commencent à être chargées uniquement après un premier passage de la souris. Mais le préchargement fonctionne pour les autres images du site.
Pourriez vous m'indiquer pourquoi cela ne fonctionne pas pour les images définies en background dans le jquery.

Merci

<div id="showcase">

<a href="#" id="products_toggle">catégorie 1ier niveau</a>

<div id="products_explorer">
  <ul id="products_menu">
	<li class="class1"><a href="#">catégorie 2nd niveau - lien 1</a>
		<div class="products_list">
		  <div class="products_lists">contenu</div>
		</div>  
	</li>
	<li class="class2"><a href="#">catégorie 2nd niveau - lien 2</a>
		<div class="products_list">
		  <div class="products_lists">contenu</div>
		</div>  
	</li>
	<li>etc .... </li>      
  </ul>

//script pour Mouse over - fonctionne ok
<script>
    $("#products_toggle").click(function () {
    	$("div#products_explorer").toggle();
    });
  $(".class1").mouseover(function () {
    $("#showcase").css("background","transparent url(http://..../images/display-class1.png) 0 0 no-repeat");
    $(".class1 .products_list").show();
  });
  $(".class1").mouseout(function () {
    $("#showcase").css("background","transparent url(http://.../images/default-display.png) 0 0 no-repeat");
    $(".class1 .products_list").hide();
  });
  $(".class2").mouseover(function () {
    $("#showcase").css("background","transparent url(http://.../images/display-class2.png) 0 0 no-repeat");
    $(".class2 .products_list").show();
  });
  $(".class2").mouseout(function () {
    $("#showcase").css("background","transparent url(http://.../images/default-display.png) 0 0 no-repeat");
    $(".class2 .products_list").hide();
  });
</script>
</div>
</div>


//Préchargement des images qui ne fonctionne pas
<script type="text/javascript">
var image1 = new Image();
image1.src = "http://.../images/default-display.png";
var image2 = new Image();
image2.src = "http://.../images/display-class2.png";
var image3 = new Image();
image3.src = "http://..../images/display-class1.png";
//-->
</script>

Bonjour,
essaye de remplacer

$("#showcase").css("background","transparent url(http://.../images/default-display.png) 0 0 no-repeat");

par ceci

$("#showcase").css("background","transparent url('http://.../images/default-display.png') 0 0 no-repeat");

tu as oublié les guillemets dans toutes tes URLs appelée par jquery
Modifié par qualithras (06 Apr 2012 - 15:29)

Bonjour,

Cette modification ne résout pas le problème
Le script n'est peut être pas compatible avec le fait que l'image soit déclaré plus haut dans le jquery ?

Bon j'ai un peu honte :

dans le jquery j'avais les images avec comme extension .PNG
dans le script de preload j'avais .JPG

Désolé
Sûrement la fatigue

Merci