1

こんにちは、JS または jQuery での画像のプリロードについて質問があります。私が持っているのは、基本的に 16 回繰り返したい 1 つの画像です。

<li>image here</li>

構造。私は基本的にこのようにリストに挿入することから始めました。

<ul>
   <li>image</li>
   <li>image</li>
   <li>image</li>
</ul>

私のHTMLで16回。動作しますが、あまりきれいでも効率的でもありません。js に画像をプリロードしてから、HTML リストに挿入したい場合。ここでそれを行ういくつかの異なる方法を見つけました。

ここでそれらはキャッシュされますが、その後、li に入れる必要があります。良い提案はありますか?! JS と jQuery の両方の例を歓迎します。

ありがとう！

4

3 に答える 3

0

画像をキャッシュした後（コードhttp://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript/を使用）、JavaScriptループを実行するだけです。

for (i=0; i<16; i++) {
  $('ul#your_ul_id').append('<li><img src="your_image_url"/></li>');
}
于 2012-09-11T10:17:12.147 に答える
0

元の画像に対して.load（）イベントをトリガーしてから、DOMのクローンを作成します。

$(document).ready(function() {
var img = $('<img id="yourImg">'); 
img.load(function() {
// repeat this step ad libitum
$(this).clone().appendTo(whatever)
});
img.attr('src', yourURL);
img.appendTo(whatever2);
});
于 2012-09-11T10:18:04.297 に答える
-1 
var img = new Image();
img.onload = function() {
  $("li").prepend( this );
};
img.src = 'http://placehold.it/40x40/cf5';
于 2012-09-11T10:25:30.240 に答える