diff options
Diffstat (limited to 'www/lib/ion-image-lazy-load')
| -rw-r--r-- | www/lib/ion-image-lazy-load/.bower.json | 36 | ||||
| -rw-r--r-- | www/lib/ion-image-lazy-load/LICENSE | 21 | ||||
| -rw-r--r-- | www/lib/ion-image-lazy-load/README.md | 80 | ||||
| -rw-r--r-- | www/lib/ion-image-lazy-load/bower.json | 28 | ||||
| -rw-r--r-- | www/lib/ion-image-lazy-load/ionic-image-lazy-load.js | 124 |
5 files changed, 289 insertions, 0 deletions
diff --git a/www/lib/ion-image-lazy-load/.bower.json b/www/lib/ion-image-lazy-load/.bower.json new file mode 100644 index 00000000..c7fbe652 --- /dev/null +++ b/www/lib/ion-image-lazy-load/.bower.json @@ -0,0 +1,36 @@ +{ + "name": "ionic-image-lazy-load", + "main": "ionic-image-lazy-load.js", + "homepage": "https://github.com/paveisistemas/ionic-image-lazy-load", + "authors": [ + "Vincius Zilli Pavei <vinicius@paveisistemas.com.br>", + "Michel Vidailhet <mvidailhet@mncc.fr>" + ], + "description": "Directive to Ionic Framework that only loads an image when it is seen by the user.", + "moduleType": [ + "amd" + ], + "keywords": [ + "ionic", + "lazy", + "load", + "image" + ], + "license": "MIT", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ], + "_release": "fd1812ec1c", + "_resolution": { + "type": "branch", + "branch": "master", + "commit": "fd1812ec1cec3d3e44ef2e9f823104ceed0b196b" + }, + "_source": "git://github.com/paveisistemas/ionic-image-lazy-load.git", + "_target": "*", + "_originalSource": "ion-image-lazy-load" +} diff --git a/www/lib/ion-image-lazy-load/LICENSE b/www/lib/ion-image-lazy-load/LICENSE new file mode 100644 index 00000000..b4d5a95e --- /dev/null +++ b/www/lib/ion-image-lazy-load/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2015 Pavei Sistemas + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. 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 +<script src="path/to/ionic-image-lazy-load.js"></script> +``` + +Load into your module: + +```javascript +angular.module('yourapp', + ['ionic', 'ionicLazyLoad']) +``` + +Set the `lazy-scroll` directive on your `<ion-content>` tag, that will listen to the scroll event: + +``` javascript +<ion-content lazy-scroll> +``` + +And set the `img-lazy-src` directive on the image attribute instead of `src`: + +```javascript + <img image-lazy-src="{{item.thumbnail}}"> +``` + +You can also use it as a background-image for an element by setting the `image-lazy-background-image` paramameter to true: +``` javascript +<div image-lazy-src="{{item.thumbnail}}" image-lazy-background-image="true"></div> +``` + +You can also set an option to auto call `$ionicScrollDelegate.resize()` when the image `load` (default value is `false`): + +```javascript + <img image-lazy-src="{{item.thumbnail}}" lazy-scroll-resize="true"> +``` + +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 + <img image-lazy-src="{{item.thumbnail}}" image-lazy-loader="lines"> +``` +Note: the styling of the loader position is up to you. The directive adds this html: + +```html +<div class="image-loader-container"> + <ion-spinner class="image-loader" icon="#spinnerStyle#"></ion-spinner> +</div> +``` + +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 + <img image-lazy-src="{{item.thumbnail}}" image-lazy-distance-from-bottom-to-load="100"> +``` + +This will allow to start loading the image 100px before the right side of the screen: +```javascript + <img image-lazy-src="{{item.thumbnail}}" image-lazy-distance-from-right-to-load="100"> +``` diff --git a/www/lib/ion-image-lazy-load/bower.json b/www/lib/ion-image-lazy-load/bower.json new file mode 100644 index 00000000..f30b1128 --- /dev/null +++ b/www/lib/ion-image-lazy-load/bower.json @@ -0,0 +1,28 @@ +{ + "name": "ionic-image-lazy-load", + "main": "ionic-image-lazy-load.js", + "version": "1.0.0", + "homepage": "https://github.com/paveisistemas/ionic-image-lazy-load", + "authors": [ + "Vincius Zilli Pavei <vinicius@paveisistemas.com.br>", + "Michel Vidailhet <mvidailhet@mncc.fr>" + ], + "description": "Directive to Ionic Framework that only loads an image when it is seen by the user.", + "moduleType": [ + "amd" + ], + "keywords": [ + "ionic", + "lazy", + "load", + "image" + ], + "license": "MIT", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ] +} diff --git a/www/lib/ion-image-lazy-load/ionic-image-lazy-load.js b/www/lib/ion-image-lazy-load/ionic-image-lazy-load.js new file mode 100644 index 00000000..da9ff94d --- /dev/null +++ b/www/lib/ion-image-lazy-load/ionic-image-lazy-load.js @@ -0,0 +1,124 @@ +/** + * Created by PAVEI on 30/09/2014. + * Updated by Ross Martin on 12/05/2014 + * Updated by Davide Pastore on 04/14/2015 + * Updated by Michel Vidailhet on 05/12/2015 + */ + +angular.module('ionicLazyLoad', []); + +angular.module('ionicLazyLoad') + +.directive('lazyScroll', ['$rootScope', '$timeout', + function($rootScope, $timeout) { + return { + restrict: 'A', + link: function ($scope, $element) { + + var scrollTimeoutId = 0; + + $scope.invoke = function () { + $rootScope.$broadcast('lazyScrollEvent'); + }; + + $element.bind('scroll', function () { + + $timeout.cancel(scrollTimeoutId); + + // wait and then invoke listeners (simulates stop event) + scrollTimeoutId = $timeout($scope.invoke, 0); + + }); + + + } + }; +}]) + +.directive('imageLazySrc', ['$document', '$timeout', '$ionicScrollDelegate', '$compile', + function ($document, $timeout, $ionicScrollDelegate, $compile) { + return { + restrict: 'A', + scope: { + lazyScrollResize: "@lazyScrollResize", + imageLazyBackgroundImage: "@imageLazyBackgroundImage" + }, + link: function ($scope, $element, $attributes) { + if (!$attributes.imageLazyDistanceFromBottomToLoad) { + $attributes.imageLazyDistanceFromBottomToLoad = 0; + } + if (!$attributes.imageLazyDistanceFromRightToLoad) { + $attributes.imageLazyDistanceFromRightToLoad = 0; + } + + if ($attributes.imageLazyLoader) { + var loader = $compile('<div class="image-loader-container"><ion-spinner class="image-loader" icon="' + $attributes.imageLazyLoader + '"></ion-spinner></div>')($scope); + $element.after(loader); + } + + var deregistration = $scope.$on('lazyScrollEvent', function () { + //console.log('scroll'); + if (isInView()) { + loadImage(); + deregistration(); + } + } + ); + + function loadImage() { + //Bind "load" event + $element.bind("load", function (e) { + if ($attributes.imageLazyLoader) { + loader.remove(); + } + if ($scope.lazyScrollResize == "true") { + //Call the resize to recalculate the size of the screen + $ionicScrollDelegate.resize(); + } + }); + + if ($scope.imageLazyBackgroundImage == "true") { + var bgImg = new Image(); + bgImg.onload = function () { + if ($attributes.imageLazyLoader) { + loader.remove(); + } + $element[0].style.backgroundImage = 'url(' + $attributes.imageLazySrc + ')'; // set style attribute on element (it will load image) + if ($scope.lazyScrollResize == "true") { + //Call the resize to recalculate the size of the screen + $ionicScrollDelegate.resize(); + } + }; + bgImg.src = $attributes.imageLazySrc; + } else { + $element[0].src = $attributes.imageLazySrc; // set src attribute on element (it will load image) + } + } + + function isInView() { + var clientHeight = $document[0].documentElement.clientHeight; + var clientWidth = $document[0].documentElement.clientWidth; + var imageRect = $element[0].getBoundingClientRect(); + return (imageRect.top >= 0 && imageRect.top <= clientHeight + parseInt($attributes.imageLazyDistanceFromBottomToLoad)) + && (imageRect.left >= 0 && imageRect.left <= clientWidth + parseInt($attributes.imageLazyDistanceFromRightToLoad)); + } + + // bind listener + // listenerRemover = scrollAndResizeListener.bindListener(isInView); + + // unbind event listeners if element was destroyed + // it happens when you change view, etc + $element.on('$destroy', function () { + deregistration(); + }); + + // explicitly call scroll listener (because, some images are in viewport already and we haven't scrolled yet) + $timeout(function () { + if (isInView()) { + loadImage(); + deregistration(); + } + }, 500); + } + }; + }]); |