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 列表中。我发现了一些不同的方法here .

这里它们被缓存，但是我需要将它们放入 li 中。有什么好的建议吗？!欢迎使用 JS 和 jQuery 示例。

谢谢!

Answer 1

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