Question

我正在尝试在加载后将图片加载到页面上。

证明这一点的最佳（但原始）方式是：

<div id="images">
    <script type="text/javascript">
        for (var i = 0; i < 10000; i++) {
            document.write("<img src=\"imgs/"+i+".jpg\" \">");
        }
    </script>
</div>

jsFiddle：http://jsfiddle.net/alexjamesbrown/XPBdg/

...是的，在页面上加载10000个标签！

我想要发生的是页面加载，然后在页面加载后，一个接一个地触发'for'循环（以免过多地破坏浏览器）

我也在jQuery中试过这个，但它确实挂了浏览器......

$(function(){
    for (var i = 0; i < 10000; i++) {
        $('#images').append('<img src=\"img/'+i+'.jpg\" width: 20px; height: 20px;\ class=\"img\">')
    }
})

所以，有点像'infinate scroll'类型应用的简单版本：http://www.innovativephp.com/demo/infinitescroll/

使用for循环，而不是从服务器检索数据....

Answer 1

要一次加载一张图片，请尝试

var imageCount = 0;

function nextImage( ) {
    var img = new Image(); // create image element
    img.src = "http://lorempixel.com/40/40" + imageCount; // use imageCount to change image
    img.onload = function( ) { 

        if( imageCount <= 10000 ) {

            imageCount++;
            var imgElement = document.getElementById("images");
            imgElement.appendChild( img );
            nextImage(); // only once image has loaded should we try to load another
        }
    }
}

nextImage();

让它运转起来。看看小提琴here

顺便说一句，你可以通过使用像

这样的东西来进一步延迟加载

setTimeout( nextImage, 100 );

Answer 2

在单个请求中加载10.000 img元素不是一个好习惯。你会考虑改变逻辑。

无论如何，您可以尝试以下内容来提高性能。

<div>
        <script type="text/javascript">
            var elems = [], limit = 5000;
            while(limit--) {
                elems.push('<img src="http://lorempixel.com/40/40" />');
            }
            document.write( elems.join(' ') );
            // or using jquery : $('body').append( elems.join(' ') );
        </script>
</div>

在每次循环迭代中触摸DOM会大大降低性能。

页面加载/滚动后加载/插入图像

2 个答案: