javascript - 预加载图像并插入DOM

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

<li>image here</li>

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

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

我的HTML中有16次。可行，但不是很漂亮也不有效。如果我想在js中预加载图片，然后将其插入HTML列表中。我发现了一些不同的方法here。

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

谢谢！

最佳答案

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