ionic 、ionic-image-lazy-load网络图片的懒加载和和加载效果,居中显示
来源:互联网 发布:金蝶kis mac版 编辑:程序博客网 时间:2024/05/22 05:00
1、确定使用的是ionic-image-lazy-load 架构
git地址:https://github.com/paveisistemas/ionic-image-lazy-load
首先是先将下载的ionic-image-lazy-load.js 引入到项目中;
<script src="js/ionic-image-lazy-load.js"></script>
2、常用主要的参数说明
2.1 设置lazy-scroll参数
缺少了这个参数就监听不到滚动事件,image-lazy-distance-from-bottom-to-load="100"就没有效果;
<ion-content lazy-scroll>
2.2 image-lazy-src/image-lazy-distance-from-bottom-to-load含义
image-lazy-src加载的图片链接;
image-lazy-distance-from-bottom-to-load滚动到底部的距离才加载图片链接;
image-lazy-distance-from-right-to-load类同距离右边的距离才加载;
<img image-lazy-src="{{item.thumbnail}}" image-lazy-loader="lines" image-lazy-distance-from-bottom-to-load="100">
image-lazy-loader主要的是在加载过程中出现的动画效果,源码如下,这个可以配置,
可以改为android/ios等等;
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); }
3、以上大概的掌握了就可以用了,补充一个动画效果居中显示
3.1代码引用, 如下不多解释
<ion-list> <ion-item class="cardname" ng-repeat="data_zxtmInfo in mainInfo_data_zxtm" ng-click="goGoodDetail(data_zxtmInfo.target_url)"> <img image-lazy-src="{{data_zxtmInfo.img_src}}" image-lazy-distance-from-bottom-to-load="100" image-lazy-loader="android"> </ion-item> </ion-list>
3.2 google 看下效果
如上图所示,看到一个item中有三个层次;
ion-spinner就是动画效果了;
如果不配置image-loader-container和ion-item的cardname ,样式就会很难看;如下,没有配置的效果:
3.3 image-loader-container 和cardname的CSS
主要的是斜体的部分
.cardname{ width: 100%; height: 170px; *position:relative;* } .cardname img{ width: 100%; height: 100%; } .image-loader-container{ *position:absolute; left: 43%; top: 43%;* }
以上就是iionic-image-lazy-load的主要内容,除了实例以外,大部分的内容是官网翻译过来。如果有其他的疑问或者在开发遇到问题,请留言;
0 0
- ionic 、ionic-image-lazy-load网络图片的懒加载和和加载效果,居中显示
- ionic图片懒加载的实现整合 --ionic-image-lazy-load.js
- ionic-image-lazy-load.js ionic图片加载优化
- ionic图片资源懒加载,延迟加载—— ionic-image-lazy-load
- ionic加载网络图片资源的解决方法
- ionic+requirejs实现图片的懒加载
- 图片的懒加载lazy-load.js
- Lazy Load 图片懒加载
- 使用lazy load延迟图片的加载
- ionic 上拉加载和下拉刷新
- ionic 上啦加载和下刷新
- ionic 图片加载异常处理
- ionic和angular上拉加载的问题
- Image Lazy Load:那些延时加载图片的开源插件(jQuery)
- ionic开发——图片加载失败或不存在时显示提示图片的解决方法
- 如何使用延迟加载(Lazy Load)来处理图片显示
- ionic 加载动作$ionicLoading 和加载动画 ion-spinner
- vue lazy-load 懒加载
- B-M算法求线性移位寄存器的线性综合解
- RTLabel富文本库
- ConvertChineseUnicodeToPyt
- Android DataBinding ViewPage + Fragment 封装
- mysql主从复制搭建
- ionic 、ionic-image-lazy-load网络图片的懒加载和和加载效果,居中显示
- OC 通讯录 实现的方法
- 2016SDAU编程练习二1020
- "围观"设计模式(1)--单一职责原则(SRP,Single Responsibility Principle)
- Hystrix学习(5)HelloWorld
- Nginx安装
- Nginx优化教程 实现突破十万并发
- bzoj 2815: [ZJOI2012]灾难|倍增lca|思路题
- Freedom Netkeeper宽带拨号工具