Question

我试图通过一个循环多次附加一个图像元素，但它只出现一次，任何想法为什么？

这是我的代码

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

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

Answer 1

这更快：

var i, images = '';

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

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

Answer 2

你应该在for循环中创建图像对象，因为如果不是那么它多次使用同一个对象

See demo

将jQuery更改为此，

$(document).ready(function () {

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

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

UPDATE：这不会影响页面加载时间，因为浏览器只会加载一次图像并将其缓存以供进一步使用。您可以在此处查看更多详细信息When a page loads an image, does it load it only once, or every time it is found in the markup?

Answer 3

您可以使用cloneNode方法

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

试试这段代码：

$(document).ready(function() {

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

附加图像元素的Jquery Loop只附加一次

4 个答案: