प्रगतिशील लोड हो रहा है, कोणीय जे एस

Question

मुझे आशा है कि आप मदद कर सकते हैं, सभी को इंटरनेट पर किया गया समाधान की तलाश में और नहीं मिल सकता है ..

आप में से किसी को पता कैसे प्रगतिशील लागू करने के लिए के रूप में सामग्री की भरी हुई है आप पेज को स्क्रॉल करते हैं? अन्यथा 1000 छवियां एक ही समय में लोड होंगी।

बहुत बहुत धन्यवाद।

Answer 1

मैं JQuery अनंत समाधान othe उपयोग करने के लिए नहीं करना चाहता था मेरे मोबाइल ऐप के रूप में पोस्ट किया गया आर लड़का JQuery का उपयोग नहीं करता है .. इसके लिए JQuery लोड करने में कोई बिंदु नहीं है।

किसी भी तरह से मुझे शुद्ध जेएस में जेएस फीड मिला जो इस समस्या को हल करता है।

एचटीएमएल

<div id="fixed" when-scrolled="loadMore()"> 
    <ul> 
     <li ng-repeat="i in items"></li> 
    </ul> 
</div> 

जावास्क्रिप्ट

function Main($scope) { 
    $scope.items = []; 
    var counter = 0; 
    $scope.loadMore = function() { 
     for (var i = 0; i < 5; i++) { 
      $scope.items.push({ 
       id: counter 
      }); 
      counter += 10; 
     } 
    }; 
    $scope.loadMore(); 
} 

angular.module('scroll', []).directive('whenScrolled', function() { 
    return function(scope, elm, attr) { 
     var raw = elm[0]; 
     elm.bind('scroll', function() { 
      if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) { 
       scope.$apply(attr.whenScrolled); 
      } 
     }); 
    }; 
}); 

स्रोत: http://jsfiddle.net/vojtajina/U7Bz9/

Answer 2

अनंत स्क्रॉलिंग निर्देश का उपयोग करें। ngInfiniteScroll

DEMO

---

एचटीएमएल

<div ng-app='myApp' ng-controller='DemoController'> 
    <div infinite-scroll='loadMore()' infinite-scroll-distance='2'> 
    <img ng-repeat='image in images' ng-src='http://placehold.it/225x250&text={{image}}'> 
    </div> 
</div> 

जे एस

var myApp = angular.module('myApp', ['infinite-scroll']); 
myApp.controller('DemoController', function($scope) { 
    $scope.images = [1, 2, 3, 4, 5, 6, 7, 8]; 

    $scope.loadMore = function() { 
    var last = $scope.images[$scope.images.length - 1]; 
    for(var i = 1; i <= 8; i++) { 
     $scope.images.push(last + i); 
    } 
    }; 
}); 

Answer 3

बेन नाडेल इस के लिए एक अच्छा समाधान है, जहां वह खाता दोनों खिड़की और दस्तावेज़ का आकार बदलने में लेता है । वह हर एनजी-दोहराना नोड के बाद एक पश्चाताप से बचाता है। Check it out।

Answer 4

मैंने एक मॉड्यूल बनाया है जो लगभग ngInfiniteScroll जैसा ही है, लेकिन jQuery पर निर्भर नहीं है। यह खाते में आकार बदलने वाली खिड़की लेता है। ngInfiniteScroll मेरे आवेदन में ठीक से प्रदर्शन नहीं कर रहा था इसलिए मैंने अपना खुद का निर्माण किया है और यह बहुत हल्का है।

https://github.com/Bram77/su-endless-scroll