JQuery in Google Chrome kann kein Hintergrundbild finden

Question

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

Ich mache nur eine einfache CSS-Set in jQuery 1.2.6

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

Answer 1

Ok ich das Problem auf die Spur geschafft haben. Wie tvafosson sagte, ist dies darauf zurückzuführen, dass WebKit die Bilder nicht herunterlädt. Um dies zu umgehen laden ich nur die beiden Bilder in der unclicked Klasse

<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

So wie ich angehen würde dies mit Klassen ist. Haben Sie separate CSS-Klassen für jeden der Schaltflächenstatus, dann verwenden Sie einfach jQuery, um die Klasse der Schaltfläche zu ändern. Dies würde sicherstellen, dass alle Bilder tatsächlich heruntergeladen werden und verfügbar sind, wenn Sie die Klasse festlegen - da denke ich, dass Chrome fehlschlägt (wahrscheinlich würden dies alle WebKit-Browser tun). Versuchen

<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

den vollen "Hintergrund", "url (/Portals/_default/images/buttons/checkout-end-disabled.gif) 0 0 no-repeat".

Answer 4

Statt "background-image" Verwendung "Background"

Answer 5

ich auch alle Bilder Ihren Hintergrund zu einem einzigen Bild vorschlagen würde die Konsolidierung like this. Sie verwenden dann background-position Offsets, um Ihre Rollover-Effekte auszuführen. Sie können diese Technik noch weiter ausnutzen, indem Sie ein sehr langes Tastenbild (sowohl im Normal- als auch im Rollover-Zustand) erstellen und es links und rechts ausrichten, um Ihre "Schiebetüren" zu erzeugen.