事前に画像をクリックしてクリックイベントjQueryの後に表示する

Question

私は、画像 scr属性を使用して、サーバから多くの画像が呼び出されるWebページを持っています。

私はによって引き起こされるような機能を作成しました。をクリックしてください。

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

これは問題です。より遅い接続の場合、画像は の瞬間の後に来ます。

I 事前ロード・イメージは、ユーザーが TDをクリックしたときの時間を待って回避するためにすることはできますか？

イメージをプリロードするjquery関数をいくつか見てきました。

どうすれば達成できるか考えてみてください。

Answer 1

プリロードイメージのようなものを使用する必要があり、画像をロードし、それを表示することはありませんと等価です。したがって、次のように簡単に行うことができます：

この画像は、HTMLがレンダリングを開始するとすぐにロードされます。このイメージをディスプレイまたはバックグラウンドとして使用する必要がある場合は、アドレスをimage.pngに設定するだけで、自動的にブラウザのキャッシュからフェッチされます。

Answer 2

これは、いくつかのjavascript関数を使用して行うことができます。 another questionから引用してください。

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' 
]); 

ジャバスクリプト、プリローダがどのように動作するかの説明（different question）

[...]それが動作する方法は、新しいImageオブジェクトを作成し、それを SRCを設定するだけで、ブラウザは画像を取得しようとしています。我々はそうではありません この特定の画像をブラウザに追加しているわけではありませんが、何時も の画像がページに表示されたら、 ブラウザはすでにキャッシュに保存されていて、それを取得しません。 再び。 [...]

は、だからあなたの場合には、あなたが

$(function() { 
    // Do stuff when DOM is ready 
    preload([ 
     'img/bg1.jpg', 
     'img/bg2.jpg', 
     'img/bg3.jpg' 
    ]); 
});