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

各画像を一度に 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

1 回のリクエストで 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 に答える