讓Javascript/jQuery滾動功能在連續的div上工作

我目前正在嘗試實現類似於無限/連續/無底滾動的功能，但是我想出了自己的方法（作爲一名實習生，我的老闆想要看什麼我可以自己想出來）。到目前爲止，我有固定大小的div填充頁面，當用戶滾動時，每個div都會填充一個圖像。截至目前，我寫的函數在第一個div上工作，但不再適用於連續的div。讓Javascript/jQuery滾動功能在連續的div上工作

 $(window).scroll(function() { 
     var windowOffset = $(this).scrollTop(); 
     var windowHeight = $(this).height(); 
     var totalHeight = $(document).height(); 

     var bottomOffset = $(window).scrollTop() + $(window).height(); 

     var contentLoadTriggered = new Boolean(); 

     var nextImageCount = parseInt($("#nextImageCount").attr("value")); 
     var totalCount = @ViewBag.totalCount; 
     var loadedPageIndex = parseInt($("#loadedPageIndex").attr("value")); 

     var calcScroll = totalHeight - windowOffset - windowHeight; 

     $("#message").html(calcScroll); 

     contentLoadTriggered = false; 

     if (bottomOffset >= ($(".patentPageNew[id='" + loadedPageIndex + "']").offset().top - 1000) 
     && bottomOffset <= $(".patentPageNew[id='" + loadedPageIndex + "']").offset().top && contentLoadTriggered == false 
     && loadedPageIndex == $(".patentPageNew").attr("id")) 
     { 
      contentLoadTriggered = true; 
      $("#message").html("Loading new images"); 
      loadImages(loadedPageIndex, nextImageCount); 
     } 
    });

這是圖像裝載功能：

 function loadImages(loadedPageIndex, nextImageCount) { 
     var index = loadedPageIndex; 
     for(var i = 0; i < nextImageCount; i++) 
     { 
      window.setTimeout(function() { 
       $(".patentPageNew[id='" + index + "']").html("<img src='/Patent/GetPatentImage/@Model.Id?pageIndex=" + index + "' />"); 
       index++; 
       var setValue = index; 
       $("#loadedPageIndex").attr("value", setValue); 
      }, 2000); 
     } 
    }

我想知道什麼可能導致功能停止的第一個div之後的工作，或者是否有可能是一個更好的方法是什麼我正在嘗試？

編輯：看來loadedPageIndex == $(".patentPageNew").attr("id")內if語句是罪魁禍首。

來源

2011-08-15 SCS

@ViewBag.totalCount;不是JavaScript，它是.NET，因此遇到錯誤後腳本可能會停止。

另外：".patentPageNew[id='" + loadedPageIndex + "']"效率低下。由於ID必須是唯一的，只需按ID查詢，而不是按類名查詢，然後按ID查詢。

來源

2011-08-15 14:13:57

我嘗試用常規整數值替換.NET值，但似乎仍然得到相同的結果。由於'$（「＃message」）。html（calcScroll）'仍然有效，我在想可能是我的if語句中可能存在某些條件？ – SCS

我會開始輸出你的IF邏輯中的值，看看你得到了什麼。 –

讓Javascript/jQuery滾動功能在連續的div上工作

回答

相關問題