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 相关文章推荐
jquery学习笔记 用jquery实现无刷新登录
Aug 08 Javascript
js 字符串转换成数字的三种方法
Mar 23 Javascript
JS 毫秒转时间示例代码
Sep 22 Javascript
jquery预加载图片的方法
May 27 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
Feb 17 Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 Javascript
详解Angular的数据显示优化处理
Dec 26 Javascript
js 毫秒转天时分秒的实例
Nov 17 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
ES6基础之默认参数值
Feb 21 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 Javascript
p5.js临摹动态图形的方法
Oct 23 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
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
php把session写入数据库示例
2014/02/26 PHP
PHP内置的Math函数效率测试
2014/12/01 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
JQuery 选择和过滤方法代码总结
2010/11/19 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
手机端转换rem适应
2017/04/01 Javascript
JS实现音乐导航特效
2020/01/06 Javascript
新手该如何学python怎么学好python?
2008/10/07 Python
在Python中marshal对象序列化的相关知识
2015/07/01 Python
Python爬虫之pandas基本安装与使用方法示例
2018/08/08 Python
python对验证码降噪的实现示例代码
2019/11/12 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
软件工程师面试题
2012/06/25 面试题
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
专营店会计助理岗位职责
2013/11/29 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
大学生社会实践方案
2014/05/11 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
高考励志标语
2014/06/05 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
工作调动申请报告
2015/05/18 职场文书
青春雷锋观后感
2015/06/10 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
详解nginx location指令
2022/01/18 Servers