javascript - 预加载图像并插入 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';