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 相关文章推荐
网页的标准,IMG不支持onload标签怎么办
Jun 29 Javascript
javascript控制swfObject应用介绍
Nov 29 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
BooStrap对导航条的改造实践小结
Sep 21 Javascript
JS异步加载的三种实现方式
Mar 16 Javascript
Vue.js特性Scoped Slots的浅析
Feb 20 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
Vue.js实现大屏数字滚动翻转效果
Nov 29 Javascript
微信小程序收藏功能的实现代码
Jun 19 Javascript
vue 实现动态路由的方法
Jul 06 Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 Javascript
Vue封装全局过滤器Filters的步骤
Sep 16 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判断文件是否为图片的方法总结
2017/01/06 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
javascript简单实现命名空间效果
2014/03/06 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
2014/05/28 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
jquery解析XML及获取XML节点名称的实现代码
2016/05/18 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
js简易版购物车功能
2017/06/17 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
微信小程序中为什么使用var that=this
2019/08/27 Javascript
小程序和web画三角形实现解析
2019/09/02 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
Ubuntu安装Jupyter Notebook教程
2017/10/18 Python
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
Python Web编程之WSGI协议简介
2018/07/18 Python
详解Django的CSRF认证实现
2018/10/09 Python
Python实现的爬取小说爬虫功能示例
2019/03/30 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
python学习笔记之多进程
2020/08/06 Python
python中通过pip安装库文件时出现“EnvironmentError: [WinError 5] 拒绝访问”的问题及解决方案
2020/08/11 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
数据库测试通常都包括哪些方面
2015/11/30 面试题
党员承诺书内容
2014/03/26 职场文书
2015年元旦活动总结
2014/05/09 职场文书
三方股东合作协议书范本
2014/09/28 职场文书
2015年新农村建设工作总结
2015/05/22 职场文书
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript