在显示之前预加载几张图像

Question

我有这个代码

var html = '';
data.forEach(function (item, index) {
   html += '<img src="' + item.src + '">';
}
$('.container').append(html);

在显示图像之前，如何等待图像被预加载？

我看到了类似的东西：

var img=new Image();
img.src=url;

但是我怎么知道图像何时完成预加载才能调用append（）函数？

Answer 1

两个示例的区别在于，一个示例是通过Image API创建图像的，而另一个示例是通过字符串串联进行的。

如何等待直到所有图像都加载完毕，是设置一个条件来测试是否创建了所有图像。

var html = '';
data.forEach(function (item, index) {
   if( data[index] !== -1){
       html += '<img src="' + item.src + '">';
   } else {
       $('.container').append(html);
   }
}