JQuery no Google Chrome não consegue encontrar imagem de fundo

Question

Eu tenho um botão do qual quero alterar o plano de fundo para mostrar que ele está desativado quando um usuário clica nele. Funciona bem no IE/FF, mas no Chrome parece que não consegue encontrar a imagem de fundo e não faz o fundo nada.

Estou apenas fazendo um CSS simples no jQuery 1.2.6

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

Answer 1

Ok, eu consegui rastrear o problema. Como TVanfosson disse, é porque o Webkit não está baixando as imagens. Para contornar isso, eu apenas carrego as duas imagens na aula não chutada

<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

A maneira como eu enfrentaria isso é com as aulas. Tenha classes CSS separadas para cada um dos estados do botão e, em seguida, basta usar o jQuery para alterar a classe do botão. Isso garantiria que todas as imagens sejam realmente baixadas e disponíveis quando você definir a classe - que é onde eu acho que o Chrome está falhando (provavelmente todos os navegadores do Webkit fariam isso).

<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

Em vez de "imagens de fundo" uso "BackgroundImage"

Answer 4

Experimente o "fundo" completo, "url (/portals/_default/images/buttons/checkout-end-disabled.gif) 0 0 sem repetição".

Answer 5

Eu também sugeriria consolidar todas as suas imagens de fundo em uma única imagem assim. Você então usa background-position Compensações para fazer seus efeitos de capotagem. Você pode explorar ainda mais essa técnica, criando uma imagem de botão muito longa (com seu estado normal e de rolagem) e alinhando -a à esquerda e à direita para produzir suas 'portas deslizantes'.