jquery - 从包含 jQuery 中文件名的数组中加载图像

Question

是否可以从 jQuery 的数组中加载图像？

The array looks like: var imgNames = ['images/image01.jpg, images/image02.jpg, images/image03.jpg']

我希望它在父元素中创建以下内容：

<div id="imgNames">
  <img src="images/image01.jpg">
  <img src="images/image02.jpg">
  <img src="images/image03.jpg">
</div>

我尝试了以下方法：

preload = function() {
    this.each(function(){
        $('<img/>')[0].src = imgNames;
    });
}
  var imgNames = ['images/image01.jpg, images/image02.jpg, images/image03.jpg'];
    $(document).ready(function(){
   // Preload Images:
preload();

});

我在网上找到的，但我认为它是为替换现有元素而量身定制的——而不是创建它们。

Answer 1

假设现有的 div：

<div id="imgNames"></div>

然后您可以按如下方式循环遍历数组：

var imgNames = ['images/image01.jpg', 'images/image02.jpg', 'images/image03.jpg'];

$(document).ready(function() {
    var $div = $("#imgNames");

    $.each(imgNames, function(i, val) {
        $("<img />").attr("src", val).appendTo($div);
    });
});

注意：根据上面 Krister 的评论，您的数组有一个元素，它是一个包含所有三个图像名称的字符串。我假设您打算包含三个字符串，每个字符串都有一个文件名。

Answer 2

是的你可以

请看下面的代码

preload = function(images) {
    $(images).each(function() {
        $('<img/>').attr("src", this).appendTo("#imgNames");
    });
}
var imgNames = ['images/image01.jpg', 'images/image02.jpg', 'images/image03.jpg'];
$(document).ready(function() {
    // Preload Images:
    preload(imgNames);

});​

Answer 3

试试这个

preload=function(){   
$.each(imgNames,function(index,value){
$("#imgNames img:nth-child("index")").attr('src',value)
});
}