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解决innerText浏览器兼容问题思路代码
May 17 Javascript
随窗体滑动的小插件sticky源码
Jun 21 Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 Javascript
js Date概念详细介绍
Nov 22 Javascript
代码触发js事件(click、change)示例应用
Dec 13 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
Sep 24 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
微信小程序 网络请求(GET请求)详解
Nov 16 Javascript
vue.js实现仿原生ios时间选择组件实例代码
Dec 21 Javascript
js实现上下左右弹框划出效果
Mar 08 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
详解Nuxt.js 实战集锦
Nov 19 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数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
关于php内存不够用的快速解决方法
2013/10/26 PHP
Java中final关键字详解
2015/08/10 PHP
js 事件小结 表格区别
2007/08/13 Javascript
js 格式化时间日期函数小结
2010/03/20 Javascript
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
Node中使用ES6语法的基础教程
2018/01/05 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
2019/12/30 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
2021/01/26 Javascript
python网络编程学习笔记(二):socket建立网络客户端
2014/06/09 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
python中pip的安装与使用教程
2018/08/10 Python
Python 从相对路径下import的方法
2018/12/04 Python
Python字符串对象实现原理详解
2019/07/01 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
Python with语句用法原理详解
2020/07/03 Python
PyTorch: Softmax多分类实战操作
2020/07/07 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
2019/08/05 HTML / CSS
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
英语自荐信范文
2013/12/11 职场文书
文明单位申报材料
2014/12/23 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis