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

最新推荐文章于 2025-09-24 13:34:12 发布

原创最新推荐文章于 2025-09-24 13:34:12 发布 · 7.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#实例

web前端同时被 2 个专栏收录

63 篇文章

订阅专栏

angular

6 篇文章

订阅专栏

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

这两天一直纠结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定位。