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
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>