jquery - Jqueryの機能エラー

Question

jquery関数の問題に直面しています。ビジターがマウスポインターをヘッダーの背景画像上に移動している間、ヘッダーが0.5秒間消えないようにします。

これがホームページです。子供の漫画に焦点を合わせると「こんにちは」と表示されることがありますが、ごく短時間表示されなくなることもあります。マウスのポインタをその上に移動したときに非表示にならないようにします。

score 1 · Accepted Answer

これは、ほとんどの場合、jQueryとは関係ありません。

ホバー状態に別の画像を使用する代わりに、スプライト画像を使用し、jQueryで背景の位置を変更します。これにより、2つの画像間のシームレスな移行が可能になります。

score 0 · Accepted Answer

これはjQueryの問題ではありません。

これは、マウスをヘッダーの上に移動したときにホバー画像がまだ読み込まれていないために発生します。そのため、ブラウザは必要に応じて画像をダウンロードする必要があり、時間がかかる場合があります。

基本的に2つのオプションがあります。

画像をプリロードして、すぐに必要でない場合でも画像が読み込まれ、必要なときに表示できるようにします。
通常の画像とホバー画像の両方を含む単一の画像を使用します。これはスプライトと呼ばれます。このようにして、完全な画像が読み込まれ、この問題に直面することはなくなります。次に、他の画像を表示するために背景位置を変更する必要があります。これを行うには、CSSルールに異なる背景位置座標を使用して異なるクラスを作成します。JSでは、マウスがヘッダー上にあるときにのみこのクラスを割り当てる必要があります。

あなたがそれを手動でやりたくないのであれば、あなたのために仕事をすることができるオンラインツールもあります。通常、これらのツールの使用はお勧めしませんが、同じサイズの2つの画像の場合は問題ないと思います。

score 0 · Accepted Answer

JavaScriptの早い段階で：hoverバージョンの画像をプリロードして、ホバーイベントが発生したときにすでにキャッシュされるようにする必要があると思います。

var img = new Image();
img.src = "http://www.kidsartvalley.com/images/child-head-hover.png";

3 に答える 3