0

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

证明这一点的最佳（但粗略）方法是：

<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\">')
    }
})

所以，有点像“无限滚动”类型应用程序的简单版本：http: //www.innovativephp.com/demo/infinitescroll/

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

4

2 回答 2

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

刚刚开始工作。看看这里的小提琴

顺便说一句，您可以使用类似的东西进一步延迟加载

setTimeout( nextImage, 100 );
于 2012-11-23T23:36:55.027 回答
0

在单个请求中加载 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 会大大降低性能。

于 2012-11-23T23:19:07.700 回答