JQuery in Google Chrome non riesce a trovare l'immagine di sfondo

Question

Ho un pulsante di cui voglio cambiare lo sfondo per mostrare che è disabilitato quando un utente fa clic su di esso. Funziona bene in IE / FF ma in Chrome sembra che non riesca a trovare l'immagine di sfondo e non faccia nulla allo sfondo.

Sto solo facendo un semplice set CSS in jQuery 1.2.6

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

Answer 1

Ok, sono riuscito a rintracciare il problema. Come ha detto tvanfosson, è perché WebKit non sta scaricando le immagini. Per ovviare a questo, ho caricato entrambe le immagini nella classe non cliccata

<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

Il modo in cui vorrei affrontare questo è con le classi. Disponi di classi CSS separate per ciascuno degli stati dei pulsanti, quindi utilizza semplicemente jQuery per modificare la classe del pulsante. Ciò garantirebbe che tutte le immagini siano effettivamente scaricate e disponibili quando imposti la classe, che è dove penso che Chrome non riesca (probabilmente tutti i browser WebKit lo farebbero).

<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

Invece di " immagine di sfondo " usa " backgroundImage "

Answer 4

Prova l'intero " background " ;, " url (/Portals/_default/images/buttons/checkout-end-disabled.gif) 0 0 no-repeat " ;.

Answer 5

Suggerirei anche di consolidare tutte le immagini di sfondo in un'unica immagine in questo modo . Quindi utilizzare gli offset position-background per eseguire gli effetti di rollover. Puoi sfruttare ulteriormente questa tecnica creando un'immagine di pulsante molto lunga (con sia lo stato normale che di rollover in essa) e allineala a sinistra e a destra per produrre le tue "porte scorrevoli".