预加载图像并插入DOM

Question

嗨，我有一个关于在JS或jQuery中预加载图像的问题。 我所拥有的是一张图片，我基本上希望在一张图片中重复16次

<li>image here</li>

结构体。 首先，我基本上是这样将其插入到列表中的。

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

我的HTML中有16次。 可行，但不是很漂亮也不有效。 如果要在js中预加载图片，然后插入HTML列表中。 我发现这样做的一些不同的方式在这里 。

在这里将它们缓存，但是然后我需要将它们放在li中。 有什么好的建议吗？ JS和jQuery示例均受欢迎。

谢谢！

Answer 1

缓存图像后（使用代码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>');
}

Answer 2

我会为原始图像触发.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);
});

Answer 3

var img = new Image();
img.onload = function() {
  $("li").prepend( this );
};
img.src = 'http://placehold.it/40x40/cf5';