Databases
StackOverflow2013
Postsdbo
POAngularJS how to do lazy load of images with filters
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAngularJS how to do lazy load of images with filters
    text
    copied!<p>I'm developing an angular application where the main page loads 1000 images, but the user can only look at 20 at a time. I will also have several filters on my list, so that it can be filtered and sorted based on different criteria.</p> <p>I've tried <a href="http://binarymuse.github.io/ngInfiniteScroll/#" rel="noreferrer">http://binarymuse.github.io/ngInfiniteScroll/#</a> and <a href="http://ngscroller.herokuapp.com/" rel="noreferrer">http://ngscroller.herokuapp.com/</a> but neither seems to work that well. </p> <p>Ngscroller does work but it breaks when I try to apply my filters. I also prefer this one since it does not require me to include jquery. Are there any simple directives out there that can do what I need to? I'm trying to speed up my web page but I don't want to reinvent the wheel if there is something out there which already accomplishes this.</p> <p>Here is my attempt with ngScroller: <a href="http://plnkr.co/edit/r0uhV3OxT2USxmrBQk22?p=preview" rel="noreferrer">http://plnkr.co/edit/r0uhV3OxT2USxmrBQk22?p=preview</a></p> <pre><code>&lt;div class="content" ng-controller="MainController" ng-scroller="content"&gt; &lt;ul class="list" ng-scroller-repeat="item in items | filter:idOver500k | orderBy:predicate:!reverse"&gt; &lt;li class="item"&gt;{{item.text}}&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>The scroll works without the filter and orderBy, but I'm looking for a method that will handle all cases. </p> <p>It takes at least 3 seconds longer to load my page than it does if I remove the images. It looks like angular is loading only when all of the images are obtained. What is the best way to handle this? </p> <p>Thank you!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload