ionic-image-lazy-load.js ionic图片加载优化
来源:互联网 发布:开源网络质量监控软件 编辑:程序博客网 时间:2024/05/14 16:04
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>
0 0
- ionic-image-lazy-load.js ionic图片加载优化
- ionic图片懒加载的实现整合 --ionic-image-lazy-load.js
- ionic 、ionic-image-lazy-load网络图片的懒加载和和加载效果,居中显示
- ionic图片资源懒加载,延迟加载—— ionic-image-lazy-load
- 图片的懒加载lazy-load.js
- ionic入门教程第十五课-ionic性能优化之图片延时加载
- ionic入门教程第十五课-ionic性能优化之图片延时加载
- ionic 图片加载异常处理
- 图片延迟加载 JS jQuery 插件 Lazy Load
- Lazy Load 图片懒加载
- Image Lazy Load:那些延时加载图片的开源插件(jQuery)
- ionic加载网络图片资源的解决方法
- ionic+requirejs实现图片的懒加载
- jQuery插件-Lazy Load延迟加载图片
- 使用lazy load延迟图片的加载
- jQuery图片延迟加载插件Lazy Load
- jQuery Lazy Load 图片延迟加载
- jQuery Lazy Load 图片延迟加载
- 【HDU】-4907-Task schedule(并查集)
- MySql索引原理与使用大全
- PHP读取大文件的多种方法介绍
- QT 常见格式转换
- emmc/sd 区块层解析
- ionic-image-lazy-load.js ionic图片加载优化
- ListVeiw性能优化
- view滑动冲突解决实战篇2(外部拦截法)
- linux磁盘挂载
- Image Question Answering using Convolutional Neural Networ with Dynamic Parameter Prediction
- hdu 1068(二分图最大独立集)
- 设计模式之桥接模式
- Android清除缓存
- 笔记7 Toast 常用属性及自定义