定製延遲加載 - IE9內存泄漏

Question

我目前正在開發的是按以下順序動態加載新的圖像（上的document.ready）一個基本的圖片庫：

1. 使用了AJAX調用來獲取其中的JSON包含動態呈現圖像所需的所有信息。

2. 迭代在JSON對象來創建適當的div/IMG元件，其然後被附加到頁。

     $.ajax({ 
         url: '/wp-content/themes/base/library/ajax/posts-json.php', 
         type: 'get', 
         //dataType: 'json', 
         success: function(data) { 
          // turn string response to JSON array 
          window.responseArray = JSON.parse(data); 
   
          window.lastPhotoIndex = 0; 
   
          // make sure there is a response 
          if (responseArray.length > 0) { 
           // get container 
           var container = document.getElementById("photos-container"); 
           var ulElement = document.createElement('ul'); 
           ulElement.className = "rig columns-3"; 
           ulElement.setAttribute("id", "photo-list"); 
   
           // iterate over each response 
           window.photoCount = 0; 
           for (var i = 0; i < responseArray.length; i += 1) { 
            // Only load first 10 images 
            if (responseArray[i]["post-type"] == "photo" && photoCount < 20) { 
             // Set the last photo index to this photo 
             lastPhotoIndex = i; 
             // create the li 
             var liElement = document.createElement("li"); 
   
             liElement.className = liElement.className + responseArray[i]["day"]; 
   
             //create class name string from WP tags 
             if (responseArray[i].tags.length > 0) { 
              for (var ii = 0; ii < responseArray[i].tags.length; ii += 1) { 
               nospaceTagName = responseArray[i].tags[ii].split(' ').join(''); 
               liElement.className += " " + nospaceTagName; 
              } 
             } 
   
             //create image element and append to div 
             var imgTag = document.createElement("img"); 
             imgTag.src = responseArray[i]["thumb-url"]; 
             liElement.appendChild(imgTag); 
   
             //Add modal class info to outer div 
             liElement.className += " md-trigger"; 
             //Add data-modal attribute to outer div 
             liElement.setAttribute("data-modal", "photo-modal"); 
   
             ulElement.appendChild(liElement); 
   
             //next slide 
             photoCount++; 
            } 
           } 
           //append ul to container 
           container.appendChild(ulElement); 
          } 
         }, 
         error: function(xhr, desc, err) { 
          console.log(xhr); 
          console.log("Details: " + desc + "\nError:" + err); 
         } 
   
        });// end ajax call 
   

3. Ajax調用後，我加入同時也有在JSON對象仍然更多的照片，將被稱爲窗口滾動的事件。

     // Window scroll event 
        $(window).scroll(function() { 
         var trigger = $(document).height() - 300; 
         if (trigger <= $(window).scrollTop() + $(window).height()) { 
          //Call function to load next 10 
          loadNextPhotos(); 
   
         } 
        }); 
   

4. 通過滾動調用的函數，甚至只是在先前離開的指數（ - 「window.lastPhotoIndex」 lastPhotoIndex變量集在Ajax調用的開始）開始了。功能如下：

   function loadNextPhotos() { 
   if (photoCount < getPhotoCount()) { 
       var photosOutput = 0; 
       var startingIndex = lastPhotoIndex + 1; 
       var photoList = $('#photo-list'); 
       for (var i = startingIndex; i < responseArray.length; i += 1) { 
        if (responseArray[i]["post-type"] == "photo" && photosOutput < 10) { 
         lastPhotoIndex = i; 
         photosOutput++; 
         // create the li needed 
         var element = document.createElement("li"); 
   
         element.className = responseArray[i]["day"]; 
   
         //create class name string from tags 
         if (responseArray[i].tags.length > 0) { 
          for (var ii = 0; ii < responseArray[i].tags.length; ii += 1) { 
           nospaceTagName = responseArray[i].tags[ii].split(' ').join(''); 
           element.className = element.className + " " + nospaceTagName; 
          } 
         } 
   
         //create image element and append to li 
         var imgTag = document.createElement("img"); 
         imgTag.src = responseArray[i]["thumb-url"]; 
   
   
         element.appendChild(imgTag); 
   
         //Add modal class info to li 
         element.className = element.className + " md-trigger"; 
         //Add data-modal attribute to outer div 
         element.setAttribute("data-modal", "photo-modal"); 
   
         photoList.append(element); 
   
         // Keep track of photo numbers so modal works for appropriate slide number 
         photoCount++; 
        } 
       } 
   } 
   

   }

請記住，這個代碼是精簡了很多的全面應用。它在Chrome，Safari，Firefox，IE10 +中運行良好。

當在IE9中加載時，我遇到了瘋狂的內存泄漏，因爲我點擊了滾動事件並向UL追加更多項目。

我的猜測是，創建新項目時要追加和他們記憶中停留超過他們應該，我不遵循最佳實踐。唯一的問題是我不知道如何解決它/調試它，因爲頁面在IE9中崩潰如此之快。

任何幫助都會很棒。謝謝！

編輯：

我已經試過落實Darmesh的，沒有真正的運氣的解決方案。正如我在評論中所說，它只會延遲內存泄漏的速度。我也上滾動事件的頂部增加jquery.visible.js所以它看起來是這樣的：

$(window).scroll(function() { 
if($('#lazy-load-trigger').visible() && window.isLoadingPhotos != true) { 
    console.log("VISIBLE!"); 
    loadNextPhotos(); 
} 

}）;

但它也只是延緩了內存泄漏。我仍然相信在IE9中垃圾收集存在問題，但不知道如何排除故障。

Answer 1

我認爲這是由於瀏覽器調用，同時每次滾動的時間loadNextPhotos函數多次。這可能會實現，試試看，

function loadNextPhotos() { 
    // Add flag to indicate new photos adding started 
    window.isLoadingPhotos = true; 
    .... 
    .... 
    .... 
    .... 
    // Indicate new photos adding completed 
    window.isLoadingPhotos = false; 
} 

而且，

$(window).scroll(function() { 
    var trigger = $(document).height() - 300; 
    if (trigger <= $(window).scrollTop() + $(window).height()) { 
     if(!window.isLoadingPhotos) { 
      //Call function to load next 10 
      loadNextPhotos(); 
     } 
    } 
});