Google ChromeのJQueryが背景画像を見つけられない

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

  •  03-07-2019
  •  | 
  •  

質問

ユーザーがクリックしたときに無効になることを示すために背景を変更したいボタンがあります。 IE / FFでは正常に動作しますが、クロムでは背景画像が見つからず、背景が何も表示されないようです。

alt text

jQuery 1.2.6で簡単なcssセットを実行しています

$(".CheckoutBt").css("background-image", "url(/Portals/_default/images/buttons/checkout-end-disabled.gif)");
役に立ちましたか？

解決

わかりました、問題を追跡できました。 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>

他のヒント

これに取り組む方法はクラスです。ボタンの状態ごとに個別の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...
});

＆quot; background-image＆quot;の代わりに＆quot; backgroundImage＆quot;を使用してください

完全な＆quot; background＆quot;、＆quot; url（/Portals/_default/images/buttons/checkout-end-disabled.gif）0 0 no-repeat＆quot;を試してください。

また、すべての背景画像を単一の画像に統合することをお勧めしますこのように 。次に、 background-position オフセットを使用して、ロールオーバー効果を実行します。非常に長いボタン画像（通常の状態とロールオーバー状態の両方）を作成し、左右に揃えて「スライドドア」を作成することで、この手法をさらに活用できます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top