0

ユーザーがカーソルを画像の上に置いたときに、白い背景を表示せずに自動的に変更されて元の画像をロードするように、元の画像をロードするにはどうすればよいですか？ウェブページが読み込まれるときに元の画像を読み込むコードはありますか？私にお知らせください。私のコードは：

#middlefoto{
    background-image:url(../images/middleblack.jpg);
    margin-left:1px;
    height:158px;
    width:333px;
    }
#middlefoto:hover{
    background:#fff url(../images/middlecolor.jpg) 0 0 no-repeat;
    }
4

3 に答える 3

2

ポジショニングでスプライトを使用します。

W3スクールで詳細をご覧ください

于 2013-03-07T18:27:16.623 に答える
0

画像を画面外の要素に含めます（CSSを使用して画面から画像を押し出します）。これにより、ブラウザが画像をダウンロードするため、ロールオーバーの準備ができているはずです。ページの読み込み後にオフスクリーン画像をクリーンアップできます。

<img src="rollover image" class="preloader" style="position:absolute; margin-left:-99999px" />

（実際にはインラインスタイルを使用しないでください）次に、jqueryを使用している場合

$(document).ready(function(){ $('.preloader').remove(); });

そうじする。

于 2013-03-07T18:27:35.413 に答える
0

背景が一瞬空白になっているのは、ホバー画像がまだサーバーから読み込まれていないためです。これを回避するには、画像をプリロードします。これを行うにはいくつかの方法がありますが、概念は同じです。実際に必要になる前に、ブラウザに画像を強制的にロードさせます。JavaScriptを使用してこれを行う簡単な方法は次のとおりです。

function preloadImages(sources)
{
    var img = new Image();
    for (var i = 0; i < sources.length; i++) {
        img.src = sources[i];
    }
}

preloadImages([ '../images/middlecolor.jpg', 'image2.jpg', 'image3.jpg' ]);
于 2013-03-07T18:34:47.297 に答える