图片懒加载imglazyload之ioniclazyload的使用和介绍

转载 2016年06月02日 11:24:37

对于什么是图片的懒加载,我想这个大家都比较了解的
也就是在页面上图片比较多的时候,打开一张页面必然引起与服务器大数 据量的交互。尤其是对于高清晰的图片,占的几M的空间。ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条 下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升。 
首先我们需要下载ionic-image-lazy-load.js文件,然后在index文件中引入。
然后再app.js文件中注入下

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

然后再需要有图片懒加载的页面中加入申明:lazy-scroll

这些准备工作都做好了以后,就是使用imgLazyLoad了

<img image-lazy-src="{{imgSrc }}">

当然我们也可以把这个图片设置为背景图片

<div image-lazy-src="{{imgSrc }}" image-lazy-background-image="true"></div>

当然我们也可以设置$ionicScrollDelegate的resize属性

<img image-lazy-src="{{imgSrc }}" lazy-scroll-resize="true">

在加载图片出现图片之前的时候我们也可以在界面上给个加载图标

<img image-lazy-src="{{imgSrc }}" image-lazy-loader="lines">

除了lines属性,还有另外的几种都可以随意的设置

页面中的图片什么时候开始加载也是可以设置的:
设置当距离底部或者右边多少距离的时候开始加载这个图片

<img image-lazy-src="{{imgSrc }}" image-lazy-distance-from-bottom-to-load="100"> <img image-lazy-src="{{imgSrc }}" image-lazy-distance-from-right-to-load="100">

对于ionic-image-lazy-load的实现比较简答。大致也就这么几种功能。简单容易上手。


转自:http://my.oschina.net/Nealyang/blog/548462

angular4 模块懒加载

( 在项目目录下使用命令行工具) 1.ng g module confirm-order --routing 2.ng g component confirm-order   (注意顺序,先创建...
  • NB_Token
  • NB_Token
  • 2017年10月25日 11:05
  • 1030

angular学习之五实例:实现图片懒加载

这两天一直纠结angular的图片懒加载插件中无法自拔。在使用过程深深感到js学艺不精的痛苦,想修改源码又不会修改,只能尽力压榨如何使用插件上。这里主要谈谈两种插件的使用过程遇到的问题。       ...
  • eadio
  • eadio
  • 2016年09月13日 10:45
  • 4827

angular懒加载模块me-lazyload.js使用方法详解

angular框架使用起来是非常方便的,是典型的mvc框架。而me-lazyload.js是为了angular而开发的一款图片懒加载模块。 me-lazyload的原理是通过自定义的指令,生成一个属...
  • smileboyjian
  • smileboyjian
  • 2017年07月06日 09:08
  • 1460

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

ionic-image-lazy-load ionic 图像懒加载
  • ganggelove
  • ganggelove
  • 2016年06月02日 12:09
  • 7141

Ionic--lazyload懒加载知识总结

懒加载实现页面无组件导入至app.module.ts
  • CODING_1
  • CODING_1
  • 2017年08月16日 18:53
  • 318

ionic 、ionic-image-lazy-load网络图片的懒加载和和加载效果,居中显示

1、确定使用的是ionic-image-lazy-load 架构git地址:https://github.com/paveisistemas/ionic-image-lazy-load 首先是先将下...
  • QQ417431233
  • QQ417431233
  • 2016年04月23日 15:10
  • 4374

Ionic3 自定义组件实现图片懒加载效果

在使用ionic3的过程中,我们可以使用angularjs的组件特性进行组件的自定义开发,对一些特定条件下的需求开发对应的组件。下面我们就通过自定义组件来实现图片的懒加载效果。当我们需要加载的图片很大...
  • u010730897
  • u010730897
  • 2017年06月14日 14:20
  • 2708

ionic图片懒加载的两种js写法例子

  • 2017年05月16日 08:47
  • 15.95MB
  • 下载

ionic图片懒加载的实现整合 --ionic-image-lazy-load.js

实现ionic的图片懒加载,用ionic-image-lazy-load,一般而言有两种类型的js,基本上是一样的。 第一种:这里我命名为lazy-load.js 1.引入js,在index页面加...
  • zuoyiran520081
  • zuoyiran520081
  • 2017年05月15日 18:13
  • 1043

升级到ionic3 Lazy Loading懒加载,ionic3新建页面

ionic2 CLI新建页面命令: ionic g page home 生成: home.html,home.ts,home.scss三个文件 ionic升级到到3.+之后, ionic g page...
  • u010564430
  • u010564430
  • 2017年06月27日 12:03
  • 2151
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:图片懒加载imglazyload之ioniclazyload的使用和介绍
举报原因:
原因补充:

(最多只允许输入30个字)