從包含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); 
    }); 
}); 

注意：由於p在上面的克里斯特的評論中，你的數組有一個元素是一個包含所有三個圖像名稱的字符串。我假定你打算包含三個字符串，每個字符串都有一個文件名。

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