定制延迟加载 - 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(); 
     } 
    } 
});