{"id":15366419,"url":"https://github.com/jasonboy/angular-lazyload","last_synced_at":"2025-04-15T12:22:51.377Z","repository":{"id":57178651,"uuid":"48981117","full_name":"JasonBoy/angular-lazyload","owner":"JasonBoy","description":"∞Angular directive for infinite loading","archived":false,"fork":false,"pushed_at":"2017-04-12T04:03:13.000Z","size":54,"stargazers_count":9,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-05T02:30:56.264Z","etag":null,"topics":["angular","directive","infinite-scroll","lazyload"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JasonBoy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-04T07:21:50.000Z","updated_at":"2023-03-04T06:05:22.000Z","dependencies_parsed_at":"2022-09-09T19:00:14.871Z","dependency_job_id":null,"html_url":"https://github.com/JasonBoy/angular-lazyload","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JasonBoy%2Fangular-lazyload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JasonBoy%2Fangular-lazyload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JasonBoy%2Fangular-lazyload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JasonBoy%2Fangular-lazyload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JasonBoy","download_url":"https://codeload.github.com/JasonBoy/angular-lazyload/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219842868,"owners_count":16556572,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","directive","infinite-scroll","lazyload"],"created_at":"2024-10-01T13:18:44.438Z","updated_at":"2024-10-16T08:20:54.629Z","avatar_url":"https://github.com/JasonBoy.png","language":"JavaScript","readme":"# angular-lazyload\nAngular directive for lazy loading, especially for mobile when working with pagination, slide up to load more  \n\n[![angular-lazyload-demo](https://github.com/JasonBoy/angular-lazyload/blob/master/demo/angular-lazyload.gif)](https://github.com/JasonBoy/angular-lazyload/blob/master/demo/angular-lazyload.gif)\n\n### Install\n\n`npm install angular-lazyload --save`\n\n### Usage\n\n`\u003cdiv lazyload\u003e\u003c/div\u003e` or  \n`\u003cdiv lazyload\u003e\u003cp\u003ecustom loading style...\u003c/p\u003e\u003c/div\u003e` or   \n`\u003clazyload\u003e\u003c/lazyload\u003e`  \n\n```javascript\nangular.module('myModule', ['lazyload'])\n  .controller('Demo', function($scope){\n    function loadMore() {\n      //loading more data\n      $scope.$broadcast('lazyLoadingFinished');//notify the directive to finish the current loading\n      if(noMore) {\n        $scope.$broadcast('allLoaded'); //all data loaded, remove all the touch events\n      }\n    };\n    //listen on the user touch event, which will be fired from the directive\n    $scope.$on('lazyLoading', function(){\n      loadMore();\n    });\n  });\n```  \n\n### Directive Options\n\n\n**loadingText**: '@', content to display when loading the data, default is 'loading...', if the element with the `lazyload` directive has inner html, it will use the inner html instead of the `loadingText`, with inner html, you can add complex loading styles, such as loading gif.\n\n**offsetBottom**: '@', loading div's offset to the window bottom, default: 10px, which means when the offset to the bottom \u003e= 10px, you are about to reload data.\n\n**waitDuration**: '@', display the loading text with `waitDuration`ms to prevent loading too often, default: 500ms.\n\n**scale**: '@', the scale in your `viewport` in `meta` tag, default is 1.\n\n### Events\n\n**lazyLoading**: when you get this event, you should load data now.\n\n**lazyLoadingFinished**: you should notify the directive to finish the current loading.\n\n**allLoaded**: you should notify the directive to finish the lifecycle after you get all data.\n\n### Demo  \n\n`npm install`, then see demo in `demo` dir.\n\n### License\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjasonboy%2Fangular-lazyload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjasonboy%2Fangular-lazyload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjasonboy%2Fangular-lazyload/lists"}