{"id":512,"date":"2015-09-12T08:53:56","date_gmt":"2015-09-12T08:53:56","guid":{"rendered":"http:\/\/shabeebk.com\/blog\/?page_id=512"},"modified":"2015-09-12T09:13:14","modified_gmt":"2015-09-12T09:13:14","slug":"lazy-scroll-demo-infinate-scroll-loading","status":"publish","type":"page","link":"http:\/\/shabeebk.com\/blog\/lazy-scroll-demo-infinate-scroll-loading\/","title":{"rendered":"lazy-scroll demo: Infinate scroll loading"},"content":{"rendered":"<p>Here is a demo application using lazy scroll.<\/p>\n<p>We are going to\u00a0\u00a0create a new HTML page , Here we are using angularjs and bootstrap for CSS.<\/p>\n<p class=\"\">First we can initiate\u00a0\u00a0our angularjs app in body tag like ng-app=&#8221;testModule&#8221;.<\/p>\n<pre class=\"lang:default decode:true\">&lt;body ng-app=\"testModule\"&gt;<\/pre>\n<p>we are going to define our module and it is depending lazy-scroll.<\/p>\n<pre class=\"lang:default decode:true\">var app = angular.module(\"testModule\",['lazy-scroll']);<\/pre>\n<p>Next step we have to add\u00a0\u00a0our controller \u00a0into div.<\/p>\n<pre class=\"lang:default decode:true\">        &lt;div  ng-controller=\"testController\" &gt;&lt;\/div&gt;<\/pre>\n<p>We are defining our controller to load data as below<\/p>\n<pre class=\"lang:default decode:true\">app.controller('testController', function($scope) {\r\n    });<\/pre>\n<p>&nbsp;<\/p>\n<p><!-- blog-between-2 --><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block;\" data-ad-client=\"ca-pub-1812723430816589\" data-ad-slot=\"2375946955\" data-ad-format=\"auto\"><\/ins><br \/>\n<script>\/\/ <![CDATA[\n(adsbygoogle = window.adsbygoogle || []).push({});\n\/\/ ]]><\/script><\/p>\n<p>Let us write some function to controller to load some dummy data . we can load \u00a0define some initial value<\/p>\n<pre class=\"lang:default decode:true\">var start = 0; \/\/ where to start data\r\nvar ending = start+10; \/\/ how much data need to add on each function call\r\nvar lastdata = 100; \/\/ maximum number of calls.\r\nvar reachLast = false; \/\/ to check the page ends last or not<\/pre>\n<p>Here we \u00a0going to define one more variable <em>$scope.loadmore\u00a0<\/em> this we can use to show to user for loading data.<\/p>\n<pre class=\"lang:default decode:true\">    $scope.loadmore = \"Loading More data..\";<\/pre>\n<p>We can write our function (i am nameing it as <strong>listData<\/strong>) to get data and store into a variable (<strong>testData<\/strong>). It will make a blank array on starting and it will add data into \u00a0<em><strong>testData\u00a0<\/strong><\/em>when function is calling.<\/p>\n<pre class=\"lang:default decode:true\">$scope.listData = function() {\r\n         if(reachLast){\r\n             return false;\r\n         }\r\n        var jsondt = [];\r\n            for (var i = start; i &lt; ending; i++) {\r\n                jsondt.push({\r\n                                id: i, name: \"name\"+i\r\n                          });\r\n                };\r\n                start = i;\r\n                ending = i+10;\r\n    \r\n             $scope.testData =$scope.testData.concat(jsondt);\r\n\r\n\r\n                     if(ending &gt;= lastdata) {\r\n                         reachLast = true;\r\n                         $scope.loadmore = \"Reached at bottom\";\r\n                     }\r\n            };\r\n<\/pre>\n<p><!-- blog-between-ads --><br \/>\n<ins class=\"adsbygoogle\" style=\"display: inline-block; width: 728px; height: 90px;\" data-ad-client=\"ca-pub-1812723430816589\" data-ad-slot=\"6945747355\"><\/ins><br \/>\n<script>\/\/ <![CDATA[\n(adsbygoogle = window.adsbygoogle || []).push({});\n\/\/ ]]><\/script><\/p>\n<p>So our final controller will look like as below,<\/p>\n<pre class=\"lang:default decode:true\">app.controller('testController', function($scope) {\r\n    var start = 0;\r\n    var ending = start+5;\r\n    var lastdata = 100;\r\n    var reachLast = false;\r\n\r\n    $scope.loadmore = \"Loading More data..\";\r\n     $scope.testData = [];\r\n\r\n\r\n     $scope.listData = function() {\r\n         if(reachLast){\r\n             return false;\r\n         }\r\n        var jsondt = [];\r\n            for (var i = start; i &lt; ending; i++) {\r\n                jsondt.push({\r\n                                id: i, name: \"name\"+i\r\n                          });\r\n                };\r\n                start = i;\r\n                ending = i+10;\r\n    \r\n             $scope.testData =$scope.testData.concat(jsondt);\r\n\r\n\r\n                     if(ending &gt;= lastdata) {\r\n                         reachLast = true;\r\n                         $scope.loadmore = \"Reached at bottom\";\r\n                     }\r\n            };\r\n\r\n\r\n                 $scope.listData();\r\n                     \r\n    });<\/pre>\n<p>Next we can write a ng-repeat which will get data from our function testData.<\/p>\n<pre class=\"lang:default decode:true\">   &lt;div class=\"col-md-6 portfolio-item\" ng-repeat=\"data in testData\" &gt;\r\n              {{data.id}}\r\n            &lt;\/div&gt;<\/pre>\n<p>Now we can add lazy-scroll directive into our div , so it will call the function load data on scroll.<\/p>\n<pre class=\"\">lazy-scroll=\"listData()\"<\/pre>\n<p class=\"\">Let us add some more magical functionality into it by adding lazy-scroll-trigger . it will control \u00a0when the scroll functionality need to call. it is on percentage , we can give the percentage of screen , when it needs to trigger. By default it will be 90percentage , That means it will load data when user reaches 90 percentage of window.<\/p>\n<p class=\"\">We can change into 50 percentage by giving below.<\/p>\n<pre class=\"\">lazy-scroll-trigger=\"50\"<\/pre>\n<p>&nbsp;<\/p>\n<p><!-- blog-between-2 --><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block;\" data-ad-client=\"ca-pub-1812723430816589\" data-ad-slot=\"2375946955\" data-ad-format=\"auto\"><\/ins><br \/>\n<script>\/\/ <![CDATA[\n(adsbygoogle = window.adsbygoogle || []).push({});\n\/\/ ]]><\/script><\/p>\n<p>If we want to disable scroll we can use<\/p>\n<pre class=\"\">lazy-no-scroll=\"false\"<\/pre>\n<p>At the bottom of page we can add a div and we can call on ng-click to make sure it will work still if any problems occure<\/p>\n<pre class=\"lang:default decode:true\">&lt;div class=\"col-md-10 portfolio-item\" ng-click=\"listData()\"&gt;\r\n                {{loadmore}}\r\n            &lt;\/div&gt;<\/pre>\n<p><!-- blog-between-ads --><br \/>\n<ins class=\"adsbygoogle\" style=\"display: inline-block; width: 728px; height: 90px;\" data-ad-client=\"ca-pub-1812723430816589\" data-ad-slot=\"6945747355\"><\/ins><br \/>\n<script>\/\/ <![CDATA[\n(adsbygoogle = window.adsbygoogle || []).push({});\n\/\/ ]]><\/script><\/p>\n<p class=\"\">you can check out the demo page here.<\/p>\n<p><a title=\"lazy-scrol demo\" href=\"http:\/\/shabeebk.com\/blog\/demo\/lazy-scrol\">Demo<\/a><\/p>\n<p class=\"\">Hope it will help some one \ud83d\ude42<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<div class=\"pvc_clear\"><\/div>\n<p class=\"pvc_stats all \" data-element-id=\"512\" style=\"\"><i class=\"pvc-stats-icon medium\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> &nbsp;12,515&nbsp;total views, &nbsp;4&nbsp;views today<\/p>\n<div class=\"pvc_clear\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Here is a demo application using lazy scroll. We are going to\u00a0\u00a0create a new HTML page , Here we are using angularjs and bootstrap for CSS. First we can initiate\u00a0\u00a0our angularjs app in body tag like ng-app=&#8221;testModule&#8221;. &lt;body ng-app=&#8221;testModule&#8221;&gt; we are going to define our module and it is depending lazy-scroll. var app = angular.module(&#8220;testModule&#8221;,[&#8216;lazy-scroll&#8217;]); [&hellip;]<\/p>\n<div class=\"pvc_clear\"><\/div>\n<p class=\"pvc_stats all \" data-element-id=\"512\" style=\"\"><i class=\"pvc-stats-icon medium\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> &nbsp;12,515&nbsp;total views, &nbsp;4&nbsp;views today<\/p>\n<div class=\"pvc_clear\"><\/div>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"spay_email":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v18.4.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>lazy-scroll demo: Infinate scroll loading - shabeeb Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/shabeebk.com\/blog\/lazy-scroll-demo-infinate-scroll-loading\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"lazy-scroll demo: Infinate scroll loading - shabeeb Blog\" \/>\n<meta property=\"og:description\" content=\"Here is a demo application using lazy scroll. We are going to\u00a0\u00a0create a new HTML page , Here we are using angularjs and bootstrap for CSS. First we can initiate\u00a0\u00a0our angularjs app in body tag like ng-app=&#8221;testModule&#8221;. &lt;body ng-app=&quot;testModule&quot;&gt; we are going to define our module and it is depending lazy-scroll. var app = angular.module(&quot;testModule&quot;,[&#039;lazy-scroll&#039;]); &hellip;\" \/>\n<meta property=\"og:url\" content=\"http:\/\/shabeebk.com\/blog\/lazy-scroll-demo-infinate-scroll-loading\/\" \/>\n<meta property=\"og:site_name\" content=\"shabeeb Blog\" \/>\n<meta property=\"article:modified_time\" content=\"2015-09-12T09:13:14+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"http:\/\/shabeebk.com\/blog\/#website\",\"url\":\"http:\/\/shabeebk.com\/blog\/\",\"name\":\"shabeeb Blog\",\"description\":\"A developer blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/shabeebk.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/shabeebk.com\/blog\/lazy-scroll-demo-infinate-scroll-loading\/#webpage\",\"url\":\"http:\/\/shabeebk.com\/blog\/lazy-scroll-demo-infinate-scroll-loading\/\",\"name\":\"lazy-scroll demo: Infinate scroll loading - shabeeb Blog\",\"isPartOf\":{\"@id\":\"http:\/\/shabeebk.com\/blog\/#website\"},\"datePublished\":\"2015-09-12T08:53:56+00:00\",\"dateModified\":\"2015-09-12T09:13:14+00:00\",\"breadcrumb\":{\"@id\":\"http:\/\/shabeebk.com\/blog\/lazy-scroll-demo-infinate-scroll-loading\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/shabeebk.com\/blog\/lazy-scroll-demo-infinate-scroll-loading\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/shabeebk.com\/blog\/lazy-scroll-demo-infinate-scroll-loading\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/shabeebk.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"lazy-scroll demo: Infinate scroll loading\"}]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"lazy-scroll demo: Infinate scroll loading - shabeeb Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/shabeebk.com\/blog\/lazy-scroll-demo-infinate-scroll-loading\/","og_locale":"en_US","og_type":"article","og_title":"lazy-scroll demo: Infinate scroll loading - shabeeb Blog","og_description":"Here is a demo application using lazy scroll. We are going to\u00a0\u00a0create a new HTML page , Here we are using angularjs and bootstrap for CSS. First we can initiate\u00a0\u00a0our angularjs app in body tag like ng-app=&#8221;testModule&#8221;. &lt;body ng-app=\"testModule\"&gt; we are going to define our module and it is depending lazy-scroll. var app = angular.module(\"testModule\",['lazy-scroll']); &hellip;","og_url":"http:\/\/shabeebk.com\/blog\/lazy-scroll-demo-infinate-scroll-loading\/","og_site_name":"shabeeb Blog","article_modified_time":"2015-09-12T09:13:14+00:00","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"http:\/\/shabeebk.com\/blog\/#website","url":"http:\/\/shabeebk.com\/blog\/","name":"shabeeb Blog","description":"A developer blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/shabeebk.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/shabeebk.com\/blog\/lazy-scroll-demo-infinate-scroll-loading\/#webpage","url":"http:\/\/shabeebk.com\/blog\/lazy-scroll-demo-infinate-scroll-loading\/","name":"lazy-scroll demo: Infinate scroll loading - shabeeb Blog","isPartOf":{"@id":"http:\/\/shabeebk.com\/blog\/#website"},"datePublished":"2015-09-12T08:53:56+00:00","dateModified":"2015-09-12T09:13:14+00:00","breadcrumb":{"@id":"http:\/\/shabeebk.com\/blog\/lazy-scroll-demo-infinate-scroll-loading\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/shabeebk.com\/blog\/lazy-scroll-demo-infinate-scroll-loading\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/shabeebk.com\/blog\/lazy-scroll-demo-infinate-scroll-loading\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/shabeebk.com\/blog\/"},{"@type":"ListItem","position":2,"name":"lazy-scroll demo: Infinate scroll loading"}]}]}},"_links":{"self":[{"href":"http:\/\/shabeebk.com\/blog\/wp-json\/wp\/v2\/pages\/512"}],"collection":[{"href":"http:\/\/shabeebk.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/shabeebk.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/shabeebk.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/shabeebk.com\/blog\/wp-json\/wp\/v2\/comments?post=512"}],"version-history":[{"count":12,"href":"http:\/\/shabeebk.com\/blog\/wp-json\/wp\/v2\/pages\/512\/revisions"}],"predecessor-version":[{"id":525,"href":"http:\/\/shabeebk.com\/blog\/wp-json\/wp\/v2\/pages\/512\/revisions\/525"}],"wp:attachment":[{"href":"http:\/\/shabeebk.com\/blog\/wp-json\/wp\/v2\/media?parent=512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}