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

StackOverflow https://stackoverflow.com/questions/609168

  •  03-07-2019
  •  | 
  •  

Вопрос

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

alt text

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

$(".CheckoutBt").css("background-image", "url(/Portals/_default/images/buttons/checkout-end-disabled.gif)");
Это было полезно?

Решение

Хорошо, мне удалось отследить проблему.Как сказал тванфоссон, это потому, что 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>

Другие советы

Я бы решил эту проблему с помощью классов.Создайте отдельные классы 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...
});

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top