Show visible rows only

[iBasit]

Showing visible rows only and hiding the rows which are not visible yet or has been visible before.

Problem

Rendering data all at once, can take lots of resources for mobile or even for internet, since we have different data by combining number of different selections and resources.

It will take long time to show on screen also.

Solution

Explains how it works with demo: http://www.simple.gy/blog/infinite-bacon/

Implementation 2 example http://qiita.com/kimagure/items/d29ed7b7bdaaf6977b9a

code example only 3 https://gist.github.com/iBasit/8ceef1db9de945a37559

We will only show Quran content which are visible to user, this will help us load and display Quran text faster and if we were using font images (page by page) or any other resources for Quran data, it will load partial of that resources and not all at once, which can end up lots of pages for just one surah.

[Ashraf-Ali-aa]

@iBasit check this out http://kamilkp.github.io/angular-vs-repeat but not sure how difficult it would be to port over to angular 2

[iBasit]

for angular2 https://github.com/kamilkp/ng2-vs-for in work