angular实现图片懒加载实例代码


Posted in Javascript onJune 08, 2017

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

 一)我使用的是angular-imglazyload这个插件。【https://www.npmjs.com/package/angular-imglazyload】主要是这个插件小不依赖jquery库,然后下载源码运行成功后,我就整合到自己项目上运行,结果发现竟然只有前2张加载了,滚动了都没有反映。下面是我的代码部分:

<div ng-repeat="Digest in Digest_cont track by $index"> 
     <img src="" data-ui-lazyload="{{Digest.val}}" onerror="this.src='img/default@2x_300X300.png'" ng-if="Digest.type=='img'" alt=""> 
     <div ng-if="Digest.type=='txt'">{{::Digest.val}}</div> 
    </div>

然后css上定义了loading图片,加载中会先看到的是在加载过程的图片

img[data-ui-lazyload]{ background:url(../img/icons/loading.gif) no-repeat center center;} 

一开始也不知道是什么情况,将循环图片的html代码一层一层往上放排查,经过反复查找发现是父父父级class设定的定位:position:absolute;导致了div脱离文档流导致的。而插件又是根据windows监听滚动事件的。这里的解决办法就是把定位改为relative就可以了。

然后是加载过程发现发现不知道为啥loading图片都没有出现。出现的一直是onerror定义的默认图片,一直以为是插件的问题,后来换了个插件使用。发现根源是在src=""这个属性导致的,渲染的过程认为查找不到图片就直接显示默认的图片了。这里只要删掉src属性即可解决。

然后又发现当我某几张图片定位到可是区域后,f5刷新浏览器,发现一直在加载中,图片无法显示出来,只有当我滚动下鼠标,图片才会加载出来。这个实在不清楚什么原因,我只能选择另外一个插件使用。

最终的解决方案是使用的这个插件【http://bennadel.github.io/JavaScript-Demos/demos/lazy-src-angularjs/】,发现上面的第三点问题在这里并不存在,果断使用这个插件,唯一不足是这个需要依赖于jquery库。这个插件依然是监听windows滚动事件,无法自定义监听滚动事件,因此需要注意的是以后的项目上需要懒加载的地方他的父辈元素一定不能是absolute定位。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript showModalDialog 内跳转页面的问题
Nov 25 Javascript
一个JavaScript获取元素当前高度的实例
Oct 29 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
Dec 12 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
Bootstrap每天必学之级联下拉菜单
Mar 27 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
May 16 Javascript
bootstrap侧边栏圆点导航
Jan 11 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 Javascript
如何使用Javascript中的this关键字
May 28 Javascript
uni-app 微信小程序授权登录的实现步骤
Feb 18 Javascript
微信小程序日历组件calendar详解及实例
Jun 08 #Javascript
php简单数据库操作类的封装
Jun 08 #Javascript
ReactJs设置css样式的方法
Jun 08 #Javascript
requirejs按需加载angularjs文件实例
Jun 08 #Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 #Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 #Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 #jQuery
You might like
php实现微信发红包
2015/12/05 PHP
Javascript Select操作大集合
2009/05/26 Javascript
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
使用Ajax生成的Excel文件并下载的实例
2016/11/21 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
Bootstrap 树控件使用经验分享(图文解说)
2017/11/06 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
2017/12/23 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
Python正则表达式的使用范例详解
2014/08/08 Python
python使用post提交数据到远程url的方法
2015/04/29 Python
解决seaborn在pycharm中绘图不出图的问题
2018/05/24 Python
python:接口间数据传递与调用方法
2018/12/17 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
pandas 层次化索引的实现方法
2019/07/06 Python
python怎么调用自己的函数
2020/07/01 Python
阿玛尼美妆加拿大官方商城:Giorgio Armani Beauty加拿大
2017/10/24 全球购物
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
医院护理人员的自我评价分享
2013/10/04 职场文书
应届生学校辅导员求职信
2013/11/07 职场文书
大学生职业生涯规划书范文
2014/01/14 职场文书
西岭雪山导游词
2015/02/06 职场文书
妈妈别哭观后感
2015/06/08 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
golang正则之命名分组方式
2021/04/25 Golang
七个Python必备的GUI库
2021/04/27 Python
MySQL库表名大小写的选择
2021/06/05 MySQL
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python