图片懒加载

来源：互联网发布：linux ntpdate时间同步编辑：程序博客网时间：2024/06/02 05:25

图片懒加载原理：

当前台页面没有获取到服务器图片时，就显示默认图片

步骤：

（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"
onerror="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

阅读全文

1 0