From cee8c7c15a4d67af6658fdf98fa444fddf32c121 Mon Sep 17 00:00:00 2001 From: PliablePixels Date: Sun, 26 Jul 2015 16:54:12 -0400 Subject: Added slider with alarm frame tick marks and scrubbing --- www/lib/ion-image-lazy-load/README.md | 80 +++++++++++++++++++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 www/lib/ion-image-lazy-load/README.md (limited to 'www/lib/ion-image-lazy-load/README.md') diff --git a/www/lib/ion-image-lazy-load/README.md b/www/lib/ion-image-lazy-load/README.md new file mode 100644 index 00000000..f3d823f9 --- /dev/null +++ b/www/lib/ion-image-lazy-load/README.md @@ -0,0 +1,80 @@ +ionic-image-lazy-load +===================== + + +## Demo +http://codepen.io/mvidailhet/pen/yNOGzY +http://codepen.io/pavei/pen/oFpCy + +## Quick Start + +Install using bower + +```sh +bower install ion-image-lazy-load --save +``` + +or + + +Download the file JS *ionic-image-lazy-load.js*, save on your project and load it on your *index.html*. + + +```html + +``` + +Load into your module: + +```javascript +angular.module('yourapp', + ['ionic', 'ionicLazyLoad']) +``` + +Set the `lazy-scroll` directive on your `` tag, that will listen to the scroll event: + +``` javascript + +``` + +And set the `img-lazy-src` directive on the image attribute instead of `src`: + +```javascript + +``` + +You can also use it as a background-image for an element by setting the `image-lazy-background-image` paramameter to true: +``` javascript +
+``` + +You can also set an option to auto call `$ionicScrollDelegate.resize()` when the image `load` (default value is `false`): + +```javascript + +``` + +To show a ionic spinner while the image is loading, just specify a ionic spinner type (list is here: http://ionicframework.com/docs/api/directive/ionSpinner/): + +```javascript + +``` +Note: the styling of the loader position is up to you. The directive adds this html: + +```html +
+ +
+``` + +You can set a distance from the bottom or right side of the screen where the image will start loading. +This will allow to start loading the image 100px below the bottom of the screen: + +``` javascript + +``` + +This will allow to start loading the image 100px before the right side of the screen: +```javascript + +``` -- cgit v1.2.3