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

对于什么是图片的懒加载，我想这个你们都比较了解的
也就是在页面上图片比较多的时候，打开一张页面必然引发与服务器大数 据量的交互。尤为是对于高清晰的图片，占的几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的实现比较简答。大体也就这么几种功能。简单容易上手。