ionic-image-lazy-load.js ionic图片加载优化

1、确定使用的是ionic-image-lazy-load 架构

git地址：https://github.com/paveisistemas/ionic-image-lazy-load

首先是先将下载的ionic-image-lazy-load.js 引入到项目中；

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"js/ionic-image-lazy-load.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code><ul style="" class="pre-numbering"><li>1</li></ul>

2、常用主要的参数说明

2.1 设置lazy-scroll参数

缺少了这个参数就监听不到滚动事件，image-lazy-distance-from-bottom-to-load="100"就没有效果；

<code class="hljs scss has-numbering"><ion-<span class="hljs-attribute">content</span> lazy-<span class="hljs-value">scroll</span>></code><ul style="" class="pre-numbering"><li>1</li></ul>

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类同距离右边的距离才加载；

<code class="hljs lasso has-numbering"> <span class="hljs-subst"><</span>img image<span class="hljs-attribute">-lazy</span><span class="hljs-attribute">-src</span><span class="hljs-subst">=</span><span class="hljs-string">"{{item.thumbnail}}"</span> image<span class="hljs-attribute">-lazy</span><span class="hljs-attribute">-loader</span><span class="hljs-subst">=</span><span class="hljs-string">"lines"</span>
image<span class="hljs-attribute">-lazy</span><span class="hljs-attribute">-distance</span><span class="hljs-attribute">-from</span><span class="hljs-attribute">-bottom</span><span class="hljs-attribute">-to</span><span class="hljs-attribute">-load</span><span class="hljs-subst">=</span><span class="hljs-string">"100"</span><span class="hljs-subst">></span></code><ul style="" class="pre-numbering"><li>1</li><li>2</li></ul>

image-lazy-loader主要的是在加载过程中出现的动画效果，源码如下，这个可以配置，

可以改为android/ios等等；

<code class="hljs applescript has-numbering"> <span class="hljs-keyword">if</span> ($attributes.imageLazyLoader) {
loader = $compile('<<span class="hljs-keyword">div</span> <span class="hljs-type">class</span>=<span class="hljs-string">"image-loader-container"</span>><ion-spinner <span class="hljs-type">class</span>=<span class="hljs-string">"image-loader"</span> icon=<span class="hljs-string">"'
+ $attributes.imageLazyLoader + '"</span>></ion-spinner></<span class="hljs-keyword">div</span>>')($scope);
$element.<span class="hljs-keyword">after</span>(loader);
}</code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>

3、以上大概的掌握了就可以用了，补充一个动画效果居中显示

3.1代码引用， 如下不多解释

<code class="hljs lasso has-numbering"><span class="hljs-subst"><</span>ion<span class="hljs-attribute">-list</span><span class="hljs-subst">></span>
<span class="hljs-subst"><</span>ion<span class="hljs-attribute">-item</span> class<span class="hljs-subst">=</span><span class="hljs-string">"cardname"</span> ng<span class="hljs-attribute">-repeat</span><span class="hljs-subst">=</span><span class="hljs-string">"data_zxtmInfo in mainInfo_data_zxtm"</span>
ng<span class="hljs-attribute">-click</span><span class="hljs-subst">=</span><span class="hljs-string">"goGoodDetail(data_zxtmInfo.target_url)"</span><span class="hljs-subst">></span>
<span class="hljs-subst"><</span>img image<span class="hljs-attribute">-lazy</span><span class="hljs-attribute">-src</span><span class="hljs-subst">=</span><span class="hljs-string">"{{data_zxtmInfo.img_src}}"</span> image<span class="hljs-attribute">-lazy</span><span class="hljs-attribute">-distance</span><span class="hljs-attribute">-from</span><span class="hljs-attribute">-bottom</span><span class="hljs-attribute">-to</span><span class="hljs-attribute">-load</span><span class="hljs-subst">=</span><span class="hljs-string">"100"</span> image<span class="hljs-attribute">-lazy</span><span class="hljs-attribute">-loader</span><span class="hljs-subst">=</span><span class="hljs-string">"android"</span><span class="hljs-subst">></span>
<span class="hljs-subst"><</span>/ion<span class="hljs-attribute">-item</span><span class="hljs-subst">></span>
<span class="hljs-subst"><</span>/ion<span class="hljs-attribute">-list</span><span class="hljs-subst">></span></code>