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