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

在您缓存图片后（使用代码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';

预加载图像并插入DOM

3 个答案: