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 validate使用攻略 第四步
Jul 01 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
Oct 04 Javascript
将HTML格式的String转化为HTMLElement的实现方法
Aug 07 Javascript
jQuery zclip插件实现跨浏览器复制功能
Nov 02 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
Feb 23 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
Jun 14 Javascript
如何在Vue.js中实现标签页组件详解
Jan 02 Javascript
200行HTML+JavaScript实现年会抽奖程序
Jan 22 Javascript
vue使用video插件vue-video-player的示例
Oct 03 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
Smarty Foreach 使用说明
2010/03/23 PHP
CentOS安装php v8js教程
2015/02/26 PHP
php投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
php+mysql+ajax实现单表多字段多关键词查询的方法
2017/04/15 PHP
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
用JavaScript隐藏控件的方法
2009/09/21 Javascript
jQuery Ajax使用 全解析
2010/12/15 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
解析Javascript单例模式概念与实例
2016/12/05 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
Angular实现svg和png图片下载实现
2019/05/05 Javascript
JavaScript console的使用方法实例分析
2020/04/28 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
django通过ajax发起请求返回JSON格式数据的方法
2015/06/04 Python
python 2.7.14安装图文教程
2018/04/08 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
应届生体育教师自荐信
2013/10/03 职场文书
灰雀教学反思
2014/04/28 职场文书
物流管理专业推荐信
2014/09/06 职场文书
成绩单评语
2015/01/04 职场文书
如何在centos上使用yum安装rabbitmq-server
2021/03/31 Servers
python 如何在 Matplotlib 中绘制垂直线
2021/04/02 Python
python 提取html文本的方法
2021/05/20 Python
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL