JQuery in Google Chrome kann kein Hintergrundbild finden

Question

Ich habe eine Schaltfläche, die ich ändern möchte, um anzuzeigen, dass er deaktiviert ist, wenn ein Benutzer darauf klickt. Es funktioniert gut in IE/FF, aber in Chrom scheint es das Hintergrundbild nicht zu finden und macht den Hintergrund nichts.

Ich mache gerade ein einfaches CSS in JQuery 1.2.6

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

Answer 1

Ok, ich habe es geschafft, das Problem aufzuspüren. Wie TVANFOSSON sagte, liegt es daran, dass Webkit die Bilder nicht herunterlädt. Um dies zu umgehen

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

Answer 2

Die Art und Weise, wie ich das angehen würde, ist mit Klassen. Haben Sie einen separaten CSS -Klassen für jeden der Schaltflächenzustände und verwenden Sie einfach JQuery, um die Klasse der Taste zu ändern. Dies würde sicherstellen, dass alle Bilder tatsächlich heruntergeladen und verfügbar sind, wenn Sie die Klasse festlegen - wo ich denke, dass Chrome fehlschlägt (wahrscheinlich alle Webkit -Browser würden dies tun).

<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...
});

Answer 3

Verwenden Sie anstelle von "Hintergrundbild" "HintergrundImage"

Answer 4

Probieren Sie den vollständigen "Hintergrund", "url (/portals/_default/images/buttons/checkout-end-disabled.gif) 0 0 No-Repeat" aus.

Answer 5

Ich würde auch empfehlen, alle Ihre Hintergrundbilder in ein einzelnes Bild zu konsolidieren so was. Sie verwenden dann background-position Offsets, um Ihre Rollover -Effekte zu erzeugen. Sie können diese Technik noch weiter ausnutzen, indem Sie ein sehr langes Button -Bild (mit ihrem normalen und rollover -Zustand) erstellen und links und rechts sie so ausrichten, dass Sie Ihre „Schiebetüren“ erzeugen.