JQuery в Google Chrome не может найти фоновое изображение

Question

У меня есть кнопка, которую я хочу изменить, чтобы показать, что она отключена, когда пользователь нажимает на нее. Он хорошо работает в IE / FF, но в chrome кажется, что он не может найти фоновое изображение и ничего не делает фон.

Я просто делаю простой набор CSS в JQuery 1.2.6

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

Answer 1

Хорошо, мне удалось отследить проблему. Как сказал tvanfosson, это потому, что WebKit не загружает изображения. Чтобы обойти это, я просто загружаю оба изображения в незабитый класс

<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

Вместо «background-image» используйте «backgroundImage»

Answer 3

Я бы решил это с помощью классов. Создайте отдельные классы CSS для каждого состояния кнопки, а затем просто используйте jQuery, чтобы изменить класс кнопки. Это гарантировало бы, что все образы действительно загружаются и становятся доступными, когда вы устанавливаете класс - вот где я думаю, что Chrome не работает (вероятно, все браузеры WebKit сделали бы это).

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

Я бы также предложил объединить все ваши фоновые изображения в одно изображение , например, . Затем вы используете background-position смещения для создания эффектов прокрутки. Вы можете использовать эту технику еще дальше, сделав очень длинное изображение кнопки (как в нормальном, так и в режиме прокрутки) и выровняв его по левому и правому краям, чтобы получить «раздвижные двери».

Answer 5

Попробуйте полный "background", "url (/Portals/_default/images/buttons/checkout-end-disabled.gif) 0 0 no-repeat"