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

jquery - 附加图像元素的Jquery Loop只附加一次,第1张

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

这是我的代码

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

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

最佳答案:

4 个答案:

答案 0 :(得分:3)

这更快:

var i, images = '';

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

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

答案 1 :(得分: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?

答案 2 :(得分:1)

您可以使用cloneNode方法

&#13; &#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; &#13; &#13;

答案 3 :(得分:1)

试试这段代码:

$(document).ready(function() {

    for(i=0; i < 12; i  ) {
       var myImage = new Image();
       myImage.src = 'image.jpg';
       $('#photos').append(myImage)
    }
});
本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复