JQuery dans Google Chrome ne trouve pas d'image de fond

StackOverflow https://stackoverflow.com/questions/609168

  •  03-07-2019
  •  | 
  •  

Question

J'ai un bouton dont je veux changer l'arrière-plan pour indiquer qu'il est désactivé lorsqu'un utilisateur clique dessus. Cela fonctionne bien dans IE / FF, mais en chrome, il semble qu’il ne trouve pas l’image d’arrière-plan et ne supprime pas l’arrière-plan.

alt text

Je fais juste un ensemble de css simple dans jQuery 1.2.6 

$(".CheckoutBt").css("background-image", "url(/Portals/_default/images/buttons/checkout-end-disabled.gif)");
Était-ce utile?

La solution

Ok, j'ai réussi à localiser le problème. Comme tvanfosson l’a dit, c’est parce que WebKit ne télécharge pas les images. Pour contourner ce problème, il suffit de charger les deux images dans la classe non cliquée 

<style>
.unclicked {
 background-image: url('/Portals/_default/images/buttons/checkout-end-disabled.gif');
 background-image: url('/Portals/_default/images/buttons/checkout-end.gif');
}
.clicked {
   background-image: url('/Portals/_default/images/buttons/checkout-end-disabled.gif');
}
</style>

Autres conseils

La façon dont je voudrais aborder cela est avec les classes. Utilisez des classes CSS distinctes pour chacun des états du bouton, puis utilisez simplement jQuery pour modifier la classe du bouton. Cela garantirait que toutes les images sont effectivement téléchargées et disponibles lorsque vous définissez la classe. C’est là que, selon moi, Chrome échoue (probablement tous les navigateurs WebKit le feraient). 

<style>
.unclicked {
 ...
}
.unclicked :hover {
 ...
}
.clicked {
   background-image: url('/Portals/_default/images/buttons/checkout-end-disabled.gif');
}
</style>
...
$(".CheckoutBt").click( function() {
    $(this).removeClass('unclicked').addClass('clicked');
    ...do what ever action...
});

Au lieu de "background-image " utilisez "backgroundImage"

Essayez l'intégralité de l'URL "de fond", (/Portals/_default/images/buttons/checkout-end-disabled.gif) 0 0 sans répétition ".

Je suggérerais également de consolider toutes vos images d'arrière-plan en une seule image de la sorte . . Vous utilisez ensuite des décalages background-position pour créer vos effets de survol. Vous pouvez exploiter cette technique encore plus loin en créant une très longue image de bouton (avec son état normal et son état de basculement) et en l'alignant de gauche à droite pour produire vos "portes coulissantes".

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top