预加载图像并插入 DOM答案

【问题标题】：Preload images and insert into DOM预加载图像并插入 DOM
【发布时间】：2012-09-11 10:06:41
【问题描述】：

您好，我有一个关于在 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 示例。

谢谢！

【问题讨论】：

标签： javascript jquery dom image-preloader

【解决方案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>');
}

【讨论】：

好的，那么我将在cache.push(cacheImage); 这一行之后运行循环，然后在我的HTML 中删除所有<li>，这样就只剩下ul 了吗？！还是我误会你了？谢谢。
另外，给你的
是的，我注意到了:) 虽然我没有让它按照我想要的方式运行。这个图像路径var imgSrc = 'path/to/image.jpg'; 刚刚将一个字符串输出到 DOM 中。完全有可能我错过了一些东西。

【解决方案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);
});

【讨论】：

【解决方案3】：

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

【讨论】：

谢谢！尽管我仍然将所有 li 保存在 DOM 中，但它起到了一种魅力。不过，如果以原型设计的方式完成这项工作，那将是一件很酷的事情。我标记了你的答案。干杯！
@Tim - 我不太理解您的评论，但是要将图像插入到您想要的位置，您需要更具体地了解选择器，我使用了.prependTo('li')，但您可以执行类似的操作：.prependTo('#myUList li')。在这种情况下，您需要：<ul id="myUList"> Thx 和快乐的编码
我一直看到在设置src 后调用load。这是个错误。在设置img 的src 之前始终定义您的load 回调。
@ChaseMoskal 我不明白你的评论，你能澄清一下吗？
@RokoC.Buljan：某些浏览器可能会在您设置src 属性的那一刻触发load 事件——因为你的load 处理程序尚未绑定——你可能会错过。最好确保您的load 事件在可能触发之前始终绑定。在我的脑海中，如果我没记错的话，Internet Explorer 有一个问题，当设置src 时，缓存图像的加载事件立即触发——之后链接的加载处理程序为时已晚。我看到很多人将“？4134timestamp312”附加到他们的imgsrcs 以对抗这个-没有好处-废墟缓存。