0

image scr属性を使用してサーバーから多数の画像が呼び出される Web ページがあります 。

td clickによってトリガーされるような関数を作成しました。

function GoToStep(stepNo) {
 var imgSrc = $("#h1" + stepNo).val();
        $(".img_vertical").css("background-image", "url(" + imgSrc + ")");
}

今問題はこれです。接続が遅い場合、画像はしばらくしてから表示されます。

ユーザーがtdをクリックしたときの待ち時間を避けるために、 画像を事前に読み込むことはできますか?

画像を事前にロードするためのjquery関数を見てきました。

どうすればそれを達成できるか教えてください。

4

2 に答える 2

0

画像をプリロードすることは、画像をロードするが表示しないことと同じです。したがって、次のように簡単に実行できます。

<img src="image.png" alt="" style="display:none;"/>

これで、html のレンダリングが開始されるとすぐに、この画像が読み込まれます。この画像を表示または背景として使用する必要があるときはいつでも、アドレスを image.png に設定するだけで、ブラウザのキャッシュから自動的に取得されます。

于 2011-12-08T08:16:27.930 に答える
0

これは、いくつかの JavaScript 関数を使用して行うことができます。別の質問からの引用。

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

JavaScriptプリローダーの仕組みの説明（別の質問）

[...] 新しい Image オブジェクトを作成し、その src を設定するだけで、ブラウザーは画像を取得します。この特定の画像をブラウザーに追加するわけではありませんが、設定した方法でページに画像を表示するときが来たら、ブラウザーは既にその画像をキャッシュに保持しており、再度取得することはありません。[...]

したがって、あなたの場合、次のようなものを使用する必要があります

$(function() {
    // Do stuff when DOM is ready
    preload([
        'img/bg1.jpg',
        'img/bg2.jpg',
        'img/bg3.jpg'
    ]);
});
于 2011-12-08T08:12:01.643 に答える