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 相关文章推荐
接收键盘指令的脚本
Jun 26 Javascript
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
Javascript this关键字使用分析
Oct 21 Javascript
js 表格隔行颜色
Dec 02 Javascript
11款新鲜的jQuery插件[附所有demo下载]
Jan 24 Javascript
js简单实现竖向tab选项卡的方法
May 04 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
使用Angular自定义字段校验指令的方法示例
Feb 01 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
小程序瀑布流组件实现翻页与图片懒加载
May 19 Javascript
javascript中layim之查找好友查找群组
Feb 06 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 字符过滤类,用于过滤各类用户输入的数据
2009/05/27 PHP
php中截取中文字符串的代码小结
2011/07/17 PHP
PHP 中关于ord($str)&amp;gt;0x80的详细说明
2012/09/23 PHP
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
PHP实现自动识别Restful API的返回内容类型
2015/02/07 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
JS延迟加载加快页面打开速度示例代码
2013/12/30 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
AngularJS控制器之间的数据共享及通信详解
2016/08/01 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
2017/01/16 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
利用Python实现Windows定时关机功能
2017/03/21 Python
Python三级菜单的实例
2017/09/13 Python
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
解决import tensorflow导致jupyter内核死亡的问题
2021/02/06 Python
美国旅游网站:Tours4Fun
2017/02/17 全球购物
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
团代会邀请函
2015/02/02 职场文书
会计工作检讨书
2015/02/19 职场文书
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS