在頁面加載/滾動後加載/插入圖像

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個標籤到頁面上！

我希望發生的是頁面加載，那麼「爲」在頁面加載循環火災後，一前一後（以不破壞瀏覽器太多）

我也嘗試過這在jQuery的，但它確實掛在瀏覽器...

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

所以，有點像一個簡單版本的「infinate滾動」類型的應用程序：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會大大降低性能。