JQuery в Google Chrome не может найти фоновое изображение
-
03-07-2019 - |
Вопрос
У меня есть кнопка, фон которой я хочу изменить, чтобы показать, что она отключена, когда пользователь нажимает на нее.Он отлично работает в IE/FF, но в Chrome кажется, что он не может найти фоновое изображение и ничего не делает фоном.
Я просто делаю простой набор 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
смещения для создания эффектов опрокидывания.Вы можете использовать эту технику еще дальше, создав очень длинное изображение кнопки (с обычным состоянием и состоянием прокрутки) и выровняв его по левому и правому краю, чтобы создать «раздвижные двери».