当前位置: 首页 > 工具软件 > ng-lazy-image > 使用案例 >

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

欧阳声
2023-12-01

原文 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">
 类似资料: