1

Webサイトには、大きいバージョンと小さいバージョンの2つのバージョンの画像がたくさんあります。

Webサイトにアクセスすると、小さいバージョンが自動的に表示されます。クリックすると、jqueryを使用して非表示のdivを開き、大きいバージョンを挿入します。

大きな画像はページの読み込み時にブラウザに表示されないため(imgとしてsrc表示されません)、ユーザーが小さな画像の1つをクリックして拡大するまで読み込まれません。したがって、ページの読み込み時間が遅くなることはありません。 。

ただし、UIをできるだけ応答性の高いものにするために、ページが読み込まれた瞬間から大きな画像のバッファリングを開始したいと思います(ユーザーが画像の1つをクリックしたときにそこに表示されるようにします)。

バックグラウンドで画像の読み込みを開始するにはどうすればよいですか?

4

1 に答える 1

3

srcaをImageオブジェクト f.exに設定すると、バックグラウンドで画像の読み込みを開始できます。

(new Image).src = src;

ここにあなたのための機能があります:

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

preloadImages('one.jpg', 'two.jpg');

ウィンドウが読み込まれたときに (コールバック内で) 画像のプリロードを開始してwindow.onload、UI を妨害しないようにすることをお勧めします。

window.onload = function() {
    preloadImages('one.jpg', 'two.jpg');
};
于 2012-12-11T15:45:58.057 に答える