ionic图片资源懒加载，延迟加载—— ionic-image-lazy-load

原文 https://github.com/paveisistemas/ionic-image-lazy-load

ionic-image-lazy-load

Demo

http://codepen.io/mvidailhet/pen/yNOGzY

http://codepen.io/pavei/pen/oFpCy

快速开始

bower 安装

bower install ion-image-lazy-load --save

或者

下载js文件，保存在你的项目，并且在你的index.html 加载它。

<script src="path/to/ionic-image-lazy-load.js"></script>

加载到你的模块:

angular.module('yourapp',
['ionic', 'ionicLazyLoad'])

设置指令

lazy-scroll

到你的

<ion-content>

标签，将监听滚动事件：

<ion-content lazy-scroll>

并且设置

image-lazy-src

指令 代替图片的

src

属性

<img image-lazy-src="{{item.thumbnail}}">

您还可以使用它作为一个元素的背景图像通过设置

image-lazy-background-image

参数 为

true

:

<div image-lazy-src="{{item.thumbnail}}" image-lazy-background-image="true"></div>

您也可以设置一个选项设为自动调用

ionicScrollDelegate.resize()

当图像

load

的时候(默认值是false):

<img image-lazy-src="{{item.thumbnail}}" lazy-scroll-resize="true">

图像加载时显示ionic列表，指定一个ionic列表类型(从这些里面http://ionicframework.com/docs/api/directive/ionSpinner/);

<img image-lazy-src="{{item.thumbnail}}" image-lazy-loader="lines">

注意：你可以调他的位置。下面是将指令添加到html的例子：

<div class="image-loader-container">
<ion-spinner class="image-loader" icon="#spinnerStyle#"></ion-spinner>
</div>

你可以设置一个距离底部或者屏幕右侧的距离，当图像加载的时候显示。例如，这将允许加载的图像距离屏幕底部100px

<img image-lazy-src="{{item.thumbnail}}" image-lazy-distance-from-bottom-to-load="100">

例如，这将允许开始加载图像之前，距离右侧屏幕:100 px

<img image-lazy-src="{{item.thumbnail}}" image-lazy-distance-from-right-to-load="100">