2

jqueryに組み込まれた画像スワップスクリプトを使用して、ホバーで不透明度を変更するサムネイルのページがあります。ただし、ライブ Web サイトで実行すると速度が遅く、2 番目の画像が読み込まれるまで待つ必要があるため、ホバー スワップがすぐには行われません。ページの読み込み中にすべてのサムネイル画像をプリロードするにはどうすればよいですか? サイトはここでライブです

ここにhtmlがあります

<div class="span-16 last" id="thumbs">
        <div class="span-4">
            <a href="waterfront.php"><img src="images/thumbs/thumb1.gif" id="thumb1"></a>
        </div>

    </div><!--THUMBS ENDS-->

ここにjqueryがあります

$("#thumb1").hover(
        function(){
            $("#thumb1").attr("src","images/thumbs/thumb1A.gif");
            },

        function(){
            $("#thumb1").attr("src","images/thumbs/thumb1.gif");

        });
4

3 に答える 3

1

アレックスの答えに基づいて構築するには

var images = ['a.jpg','b.jpg','c.jpg'];
var preload = [];
for(i in images)
{
    preload[i] = new Image();
    preload[i].src = images[i];
}

imagesこれにより、配列内のすべての画像がプリロードされます。このスクリプトは、もちろんプリロードするイメージを事前に知っていることを前提としています。

于 2010-07-29T13:15:09.267 に答える
0

ここに役立つ記事があります。

imgDOM に要素を作成しています。

を作成し、そのプロパティを画像の場所にnew Image()設定することで、しばしばそれを行いました。srcロード時にトリガーされるイベントを取得しますonload。

したがって、簡単な例は次のようになります

var preload = new Image();

preload.onload = function() { // I believe you need to define this before you set the src for IE
    alert('loaded');
}

preload.src = 'path/to/image.png';
于 2010-07-28T23:48:30.493 に答える
0

私が投票したソリューションに関する私のコメントを参照してください。コールバックを使用して真のプリローダーを追加する方法の詳細については、http: //farinspace.com/jquery-image-preload-plugin/を参照してください。

ロールオーバー用に画像をプリロードすることが重要であるため、これらの画像がロードされるまでメニューを表示したくない場合があります。init でメニューを非表示にして、onload コールバックで表示できます。

于 2010-07-31T15:16:40.867 に答える