angular学习之五实例：实现图片懒加载

最新推荐文章于 2024-07-03 10:11:40 发布

草灯

最新推荐文章于 2024-07-03 10:11:40 发布

阅读量7.5k

点赞数 2

分类专栏： web前端 angular 文章标签：实例

本文链接：https://blog.csdn.net/eadio/article/details/52474032

版权

本文探讨在Angular项目中使用angular-imglazyload插件进行图片懒加载时遇到的问题，包括加载图片数量限制、loading图片未显示、刷新后图片加载延迟等，并提供了解决方案，建议使用另一个依赖jQuery的插件。

摘要由CSDN通过智能技术生成

这两天一直纠结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}}" οnerrοr="this.src='img/default@2x_300X300.png'" ng-if="Digest.type=='img'" alt="">
          <div ng-if="Digest.type=='txt'">{
  {::Digest.val}}</div>
        </div>

然后css上