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)
});
}

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

3 个答案: