圖片懶加載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的實現比較簡答。大體也就這麼幾種功能。簡單容易上手。