jquery循環附加圖像元素只是追加一次

Question

我試圖通過一個循環多次追加圖像元素，但它只出現一次，任何想法爲什麼？

這裏是我的代碼

$(document).ready(function() { 
    var myImage = new Image(); 
    myImage.src = 'image.jpg'; 

    for(i=0; i < 12; i++) { 
    $('#photos').append(myImage) 
    } 
}); 

Answer 1

，因爲如果不是則多次

See demo

改變你的jQuery這種使用同一個對象，您應該創建for循環內的圖像對象，

$(document).ready(function() { 

    for (i = 0; i < 12; i++) { 
     var myImage = new Image(); 
     myImage.src = 'image.jpg'; 

     $('#photos').append(myImage); 
    } 
}); 

更新：這不會影響頁面加載時間，因爲瀏覽器只會加載一次圖像並將其緩存以備後用。你可以在這裏看到更多的細節When a page loads an image, does it load it only once, or every time it is found in the markup?

Answer 2

您可以使用cloneNode方法

var myImage = new Image(); 
 
    myImage.src = 'image.jpg'; 
 

 
    for(i=0; i < 12; i++) { 
 
    $('#photos').append(myImage.cloneNode()) 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="photos"></div>

Answer 3

試試這個代碼：

$(document).ready(function() { 

    for(i=0; i < 12; i++) { 
     var myImage = new Image(); 
     myImage.src = 'image.jpg'; 
     $('#photos').append(myImage) 
    } 
}); 

Answer 4

這是更快：

var i, images = ''; 

for(i = 0; i < 12; i++) 
    images += '<img src="image.jpg">'; 

$('#photos').append(images);