图片懒加载原理:
当前台页面没有获取到服务器图片时,就显示默认图片
步骤:
(1)引入JS文件:ionic-image-lazy-load.js
(2)在app.js里注入:ionicLazyLoad
(3)在需要的地方用:
<img image-lazy-loader="" src="img/advertisement_pic_load_fail.png" image-lazy-distance-from-bottom-to-load="600"
οnerrοr="this.src='img/advertisement_pic_load_fail.png'" image-lazy-src="{{ Constant.url }}{{item.FILE_PATH }}"/>
(4)在当前的ion-content里添加lazy-scroll
演示:
ionic-image-lazy-load.js
文件代码(引用下载的,复制粘贴在这里,方便使用):
angular.module('ionicLazyLoad') .directive('lazyScroll', ['$rootScope', function($rootScope) { return { restrict: 'A', link: function ($scope, $element) { var origEvent = $scope.$onScroll; $scope.$onScroll = function () { $rootScope.$broadcast('lazyScrollEvent'); if(typeof origEvent === 'function'){ origEvent(); } }; } }; }]) .directive('imageLazySrc', ['$document', '$timeout', '$ionicScrollDelegate', '$compile', function ($document, $timeout, $ionicScrollDelegate, $compile) { return { restrict: 'A', scope: { lazyScrollResize: "@lazyScrollResize", imageLazyBackgroundImage: "@imageLazyBackgroundImage", imageLazySrc: "@" }, link: function ($scope, $element, $attributes) { if (!$attributes.imageLazyDistanceFromBottomToLoad) { $attributes.imageLazyDistanceFromBottomToLoad = 0; } if (!$attributes.imageLazyDistanceFromRightToLoad) { $attributes.imageLazyDistanceFromRightToLoad = 0; } var loader; if ($attributes.imageLazyLoader) { loader = $compile('<div class="image-loader-container"><ion-spinner class="image-loader" icon="' + $attributes.imageLazyLoader + '"></ion-spinner></div>')($scope); $element.after(loader); } $scope.$watch('imageLazySrc', function (oldV, newV) { if(loader) loader.remove(); if ($attributes.imageLazyLoader) { 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(); } } ); $timeout(function () { if (isInView()) { loadImage(); deregistration(); } }, 500); }); 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(); } $element.unbind("load"); }); 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); } }; }]);
参照:http://blog.csdn.net/qq417431233/article/details/51226435
https://github.com/paveisistemas/ionic-image-lazy-load