当前位置：首页 > 资讯 > 技术文档

angular实现图片懒加载实例代码

时间：2020-04-18 07:13 编辑：来源：阅读：
扫一扫，手机访问

摘要：angular实现图片懒加载实例代码

这两天一直纠结angular的图片懒加载插件中无法自拔。在使用过程深深感到js学艺不精的痛苦，想修改源码又不会修改，只能尽力压榨如何使用插件上。这里主要谈谈在使用插件的过程遇到的一些问题。一）我使用的是angular-imglazyload这个插件。【[url=https://www.npmjs.com/package/angular-imglazyload]https://www.npmjs.com/package/angular-imglazyload[/url]】主要是这个插件小不依赖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图片，加载中会先看到的是在加载过程的图片

[url=http://bennadel.github.io/JavaScript-Demos/demos/lazy-src-angularjs/]http://bennadel.github.io/JavaScript-Demos/demos/lazy-src-angularjs/[/url]】，发现上面的第三点问题在这里并不存在，果断使用这个插件，唯一不足是这个需要依赖于jquery库。这个插件依然是监听windows滚动事件，无法自定义监听滚动事件，因此需要注意的是以后的项目上需要懒加载的地方他的父辈元素一定不能是absolute定位。以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：Angular用来控制元素的展示与否的原生指令介绍
下一篇：Angular 1.x个人使用的经验小结

资讯排行榜
更多>>

联系客服

客服电话：
400-000-3129

微信版

扫一扫进微信版

返回顶部