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

الطريقة التي سأتعامل بها مع هذا مع الفصول. احصل على فئات 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 3

بدلاً من استخدام "صورة الخلفية" استخدام "BackgroundImage"

Answer 4

جرب "الخلفية" الكاملة ، "url (/portals/_default/images/buttons/checkout-end-disabled.gif) 0 0 no-repeat".

Answer 5

أود أن أقترح أيضًا دمج جميع صور الخلفية الخاصة بك في صورة واحدة مثله. ثم تستخدم background-position تعويضات للقيام بتأثيرات التمرير. يمكنك استغلال هذه التقنية بشكل أكبر من خلال صنع صورة زر طويلة جدًا (مع كل من حالتها العادية والمتداولة فيها) ومحاذاة اليسار واليمين لإنتاج "الأبواب المنزلق".