{"id":479,"date":"2015-09-10T19:08:52","date_gmt":"2015-09-10T19:08:52","guid":{"rendered":"http:\/\/shabeebk.com\/blog\/?page_id=479"},"modified":"2015-09-12T11:56:37","modified_gmt":"2015-09-12T11:56:37","slug":"lazy-scroll-infinite-scrolling-angularjs-plugin","status":"publish","type":"page","link":"http:\/\/shabeebk.com\/blog\/lazy-scroll-infinite-scrolling-angularjs-plugin\/","title":{"rendered":"lazy scroll &#8211; infinite scrolling angularjs plugin"},"content":{"rendered":"<h2>What is lazy scrolling?<\/h2>\n<p>lazy-scroll is a angularjs directive\u00a0for infinite scrolling. Instead of click pagination links and \u00a0 going to next page , this will help to load data on scrolling as you can see in facebook .lazy-scroll will work with out jquery .<\/p>\n<h3>Download lazy-scroll<\/h3>\n<p style=\"text-align: left;\"><a title=\"lazy scroll minified version\" href=\"http:\/\/shabeebk.com\/blog\/download\/lazy-scroll\/lazy-scroll.php\">minified version\u00a0<\/a>\u00a0 \u00a0 \u00a0| \u00a0 \u00a0\u00a0<a title=\"lazy-scroll uncompressed\" href=\"http:\/\/shabeebk.com\/blog\/download\/lazy-scroll\/lazy-scroll.php?ver=uncomp\">uncompressed version\u00a0<\/a><\/p>\n<h3>What you have to do to implement on angularjs project?<\/h3>\n<p>lazy-scroll is a a simple directive for angularjs application. Simply we have to call the function which you want to call for pagination in lazy-scroll attribute.<\/p>\n<p>It will magically load data and append into variable when user reaching bottom of page. There are API also available to controll the behaviour.<\/p>\n<p class=\"\">Just see some demo samples.<\/p>\n<h3>\u00a0Check out some Demo<\/h3>\n<ul>\n<li><a title=\"lazy-scroll\" href=\"http:\/\/shabeebk.com\/blog\/demo\/lazy-scroll\/\" target=\"_blank\">Loading data from the same page<\/a><\/li>\n<li><a title=\"lazy-scroll-serverloading.\" href=\"http:\/\/shabeebk.com\/blog\/demo\/lazy-scroll\/lazyscroll-serverloading.html\" target=\"_blank\">Loading data from server\u00a0<\/a><\/li>\n<li><a title=\"lazy-scroll-imageloading\" href=\"http:\/\/shabeebk.com\/blog\/demo\/lazy-scroll\/lazyscroll-imageloading.html\" target=\"_blank\">Loading images from server<\/a><\/li>\n<\/ul>\n<p>demo with explanation can see <a href=\"http:\/\/shabeebk.com\/blog\/lazy-scroll-demo-infinate-scroll-loading\/\">here<\/a><\/p>\n<h3>How do I use in my project?<\/h3>\n<p>you can\u00a0download the minified version \u00a0 or you can use the cdn and follow simple 3 steps<\/p>\n<p>&nbsp;<\/p>\n<h6>Step 1 :<\/h6>\n<p>Add script at bottom of page after angularjs<\/p>\n<pre class=\"lang:default decode:true\" title=\"load plugin\">&lt;script src=\"path-to-script\/angularjs.min.js\"&gt;&lt;\/script&gt;<\/pre>\n<pre class=\"lang:default decode:true\" title=\"load plugin\">&lt;script src=\"path-to-script\/lazy-scroll.min.js\"&gt;&lt;\/script&gt;<\/pre>\n<h6>Step 2:<\/h6>\n<p>Ensure that your application module specifies lazy-scroll as a dependency.<\/p>\n<pre class=\"lang:default decode:true\">var app = angular.module(\"yourModule\",['lazy-scroll']);<\/pre>\n<h6>Step 3:<\/h6>\n<p>Use the directive by specifying an lazy-scroll attribute on an element.<\/p>\n<pre class=\"lang:default decode:true \">&lt;div lazy-scroll=\"paginationFuntion()\" lazy-scroll-trigger=\"80\" &gt;<\/pre>\n<p>That is it ! it will work like a magic<\/p>\n<h3>What is next?<\/h3>\n<p class=\"\">Check our API from<a title=\"lazy-scroll-api\" href=\"http:\/\/shabeebk.com\/blog\/lazy-scroll-infinite-scrolling-angularjs-plugin\/lazy-scroll-api\/\" target=\"_blank\"> here\u00a0<\/a><\/p>\n<p>See some demo and implement \ud83d\ude42<\/p>\n<div class=\"pvc_clear\"><\/div>\n<p class=\"pvc_stats all \" data-element-id=\"479\" 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;64,443&nbsp;total views, &nbsp;5&nbsp;views today<\/p>\n<div class=\"pvc_clear\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>What is lazy scrolling? lazy-scroll is a angularjs directive\u00a0for infinite scrolling. Instead of click pagination links and \u00a0 going to next page , this will help to load data on scrolling as you can see in facebook .lazy-scroll will work with out jquery . Download lazy-scroll minified version\u00a0\u00a0 \u00a0 \u00a0| \u00a0 \u00a0\u00a0uncompressed version\u00a0 What you [&hellip;]<\/p>\n<div class=\"pvc_clear\"><\/div>\n<p class=\"pvc_stats all \" data-element-id=\"479\" 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;64,443&nbsp;total views, &nbsp;5&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 - infinite scrolling angularjs plugin - shabeeb Blog<\/title>\n<meta name=\"description\" content=\"lazy-scroll is a a simple directive for angularjs application. Simply call the function which you want to call for pagination in lazy-scroll attribute.\" \/>\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-infinite-scrolling-angularjs-plugin\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"lazy scroll - infinite scrolling angularjs plugin - shabeeb Blog\" \/>\n<meta property=\"og:description\" content=\"lazy-scroll is a a simple directive for angularjs application. Simply call the function which you want to call for pagination in lazy-scroll attribute.\" \/>\n<meta property=\"og:url\" content=\"http:\/\/shabeebk.com\/blog\/lazy-scroll-infinite-scrolling-angularjs-plugin\/\" \/>\n<meta property=\"og:site_name\" content=\"shabeeb Blog\" \/>\n<meta property=\"article:modified_time\" content=\"2015-09-12T11:56:37+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\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-infinite-scrolling-angularjs-plugin\/#webpage\",\"url\":\"http:\/\/shabeebk.com\/blog\/lazy-scroll-infinite-scrolling-angularjs-plugin\/\",\"name\":\"lazy scroll - infinite scrolling angularjs plugin - shabeeb Blog\",\"isPartOf\":{\"@id\":\"http:\/\/shabeebk.com\/blog\/#website\"},\"datePublished\":\"2015-09-10T19:08:52+00:00\",\"dateModified\":\"2015-09-12T11:56:37+00:00\",\"description\":\"lazy-scroll is a a simple directive for angularjs application. Simply call the function which you want to call for pagination in lazy-scroll attribute.\",\"breadcrumb\":{\"@id\":\"http:\/\/shabeebk.com\/blog\/lazy-scroll-infinite-scrolling-angularjs-plugin\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/shabeebk.com\/blog\/lazy-scroll-infinite-scrolling-angularjs-plugin\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/shabeebk.com\/blog\/lazy-scroll-infinite-scrolling-angularjs-plugin\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/shabeebk.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"lazy scroll &#8211; infinite scrolling angularjs plugin\"}]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"lazy scroll - infinite scrolling angularjs plugin - shabeeb Blog","description":"lazy-scroll is a a simple directive for angularjs application. Simply call the function which you want to call for pagination in lazy-scroll attribute.","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-infinite-scrolling-angularjs-plugin\/","og_locale":"en_US","og_type":"article","og_title":"lazy scroll - infinite scrolling angularjs plugin - shabeeb Blog","og_description":"lazy-scroll is a a simple directive for angularjs application. Simply call the function which you want to call for pagination in lazy-scroll attribute.","og_url":"http:\/\/shabeebk.com\/blog\/lazy-scroll-infinite-scrolling-angularjs-plugin\/","og_site_name":"shabeeb Blog","article_modified_time":"2015-09-12T11:56:37+00:00","twitter_misc":{"Est. reading time":"1 minute"},"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-infinite-scrolling-angularjs-plugin\/#webpage","url":"http:\/\/shabeebk.com\/blog\/lazy-scroll-infinite-scrolling-angularjs-plugin\/","name":"lazy scroll - infinite scrolling angularjs plugin - shabeeb Blog","isPartOf":{"@id":"http:\/\/shabeebk.com\/blog\/#website"},"datePublished":"2015-09-10T19:08:52+00:00","dateModified":"2015-09-12T11:56:37+00:00","description":"lazy-scroll is a a simple directive for angularjs application. Simply call the function which you want to call for pagination in lazy-scroll attribute.","breadcrumb":{"@id":"http:\/\/shabeebk.com\/blog\/lazy-scroll-infinite-scrolling-angularjs-plugin\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/shabeebk.com\/blog\/lazy-scroll-infinite-scrolling-angularjs-plugin\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/shabeebk.com\/blog\/lazy-scroll-infinite-scrolling-angularjs-plugin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/shabeebk.com\/blog\/"},{"@type":"ListItem","position":2,"name":"lazy scroll &#8211; infinite scrolling angularjs plugin"}]}]}},"_links":{"self":[{"href":"http:\/\/shabeebk.com\/blog\/wp-json\/wp\/v2\/pages\/479"}],"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=479"}],"version-history":[{"count":14,"href":"http:\/\/shabeebk.com\/blog\/wp-json\/wp\/v2\/pages\/479\/revisions"}],"predecessor-version":[{"id":527,"href":"http:\/\/shabeebk.com\/blog\/wp-json\/wp\/v2\/pages\/479\/revisions\/527"}],"wp:attachment":[{"href":"http:\/\/shabeebk.com\/blog\/wp-json\/wp\/v2\/media?parent=479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}