在前端开发中，图片懒加载是提升网站性能的重要手段之一，可以使页面加载更快，提高用户体验。在 AngularJS 中，实现图片懒加载也是很简单的，本文将详细介绍实现方法，并提供示例代码供读者参考。
为什么需要图片懒加载？
在传统的网站开发中，当用户访问网站时，所有的图片都会马上加载，导致加载时间变长，容易造成卡顿。而图片懒加载则是指在用户滚动页面至图片位置时再进行加载，大大缩短了页面的加载时间。在一些需要滚动显示大量图片的页面中，懒加载可以显著提高用户体验。
实现方法
第一步：引入库文件
在 AngularJS 中，我们使用 ng-src 指令来加载图片，而实现懒加载则需要用到第三方插件 ng-lazyload。在页面中引入 ng-lazyload 插件即可：
<script src="https://unpkg.com/angular/angular.min.js"></script> <script src="https://unpkg.com/vlazy/lazyload.min.js"></script>
第二步：定义指令
定义一个指令用于懒加载图片。指令中使用了懒加载插件的 lazyload 服务，只有当图片滚动到了屏幕中才会进行加载。
-- -------------------- ---- -------
------------------------ ----------------- -
------ -
--------- -----
------ -
-------- ---
--
----- --------------- -------- ------ -
--- ---------- - -----
-------- ---------- -
------------- --- ----- -
---------- - --------------------------
-
-------------------------
-
-----------
--------------------------------------- ---------- -
-----------
---
-
--
---第三步：使用指令
在 HTML 中使用刚刚定义的指令即可。lazy-src 属性是指向需要懒加载的图片的地址。
<img lazy-src="image.png" />
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
----- ---------------
------
----- ----------------
---------------- -------------
------- --------------------------------------------------------
------- -------------------------------------------------------
--------
--- --- - ----------------------- ----
------------------------ ----------------- -
------ -
--------- -----
------ -
-------- ---
--
----- --------------- -------- ------ -
--- ---------- - -----
-------- ---------- -
------------- --- ----- -
---------- - --------------------------
-
-------------------------
-
-----------
--------------------------------------- ---------- -
-----------
---
-
--
---
---------
-------
--- -
------ -----
------- -----
-------------- -----
-
--------
-------
------
------------- ----------
------------------------
---- ------------------------------------------------ --
---- ------------------------------------------------ --
---- ------------------------------------------------ --
---- ------------------------------------------------ --
---- ------------------------------------------------ --
---- ------------------------------------------------ --
---- ------------------------------------------------ --
---- ------------------------------------------------ --
---- ------------------------------------------------ --
---- ------------------------------------------------ --
-------
-------总结
AngularJS 中实现图片懒加载并不难，使用第三方插件 ng-lazyload 即可。使用懒加载能够提高页面性能，使用户体验更好。在实际开发中，根据页面需求选择是否需要用到懒加载技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659110bfeb4cecbf2d64553e