https://github.com/jasonboy/angular-lazyload
∞Angular directive for infinite loading
https://github.com/jasonboy/angular-lazyload
angular directive infinite-scroll lazyload
Last synced: 12 months ago
JSON representation
∞Angular directive for infinite loading
- Host: GitHub
- URL: https://github.com/jasonboy/angular-lazyload
- Owner: JasonBoy
- License: mit
- Created: 2016-01-04T07:21:50.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2017-04-12T04:03:13.000Z (almost 9 years ago)
- Last Synced: 2024-10-05T02:30:56.264Z (over 1 year ago)
- Topics: angular, directive, infinite-scroll, lazyload
- Language: JavaScript
- Homepage:
- Size: 52.7 KB
- Stars: 9
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# angular-lazyload
Angular directive for lazy loading, especially for mobile when working with pagination, slide up to load more
[](https://github.com/JasonBoy/angular-lazyload/blob/master/demo/angular-lazyload.gif)
### Install
`npm install angular-lazyload --save`
### Usage
`
` or
`custom loading style...
` or
``
```javascript
angular.module('myModule', ['lazyload'])
.controller('Demo', function($scope){
function loadMore() {
//loading more data
$scope.$broadcast('lazyLoadingFinished');//notify the directive to finish the current loading
if(noMore) {
$scope.$broadcast('allLoaded'); //all data loaded, remove all the touch events
}
};
//listen on the user touch event, which will be fired from the directive
$scope.$on('lazyLoading', function(){
loadMore();
});
});
```
### Directive Options
**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.
**offsetBottom**: '@', loading div's offset to the window bottom, default: 10px, which means when the offset to the bottom >= 10px, you are about to reload data.
**waitDuration**: '@', display the loading text with `waitDuration`ms to prevent loading too often, default: 500ms.
**scale**: '@', the scale in your `viewport` in `meta` tag, default is 1.
### Events
**lazyLoading**: when you get this event, you should load data now.
**lazyLoadingFinished**: you should notify the directive to finish the current loading.
**allLoaded**: you should notify the directive to finish the lifecycle after you get all data.
### Demo
`npm install`, then see demo in `demo` dir.
### License
MIT