用angularjs指令写一个图片懒加载

原创于 2018-10-23 11:07:17 发布 · 746 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #懒加载 #指令 #图片

AngularJs 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用懒加载技术优化图片加载的方法，通过先展示占位图，待页面滚动到图片位置时，再加载实际图片，有效提升网页性能。文章详细讲解了如何使用AngularJS指令实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路：

先用一个比较小的img图片提示用户，正在加载图片；等图片加载完毕后，再显示需要的图片。

html：src为默认显示的图片，lazy-src为需要懒加载的图片

 <img image-lazy-load src=""  lazy-src="../image/logo.png" alt=""/>

js：

app.directive('imageLazyLoad', function() {
   return {
       // A = attribute, E = Element, C = Class and M = HTML Comment
       restrict: 'A',
       link: function(scope, element, attrs){
           element[0].src = '../image/logo.png';   //default
           element[0].onload =function (ev) {  //image load success
               element[0].src = attrs.lazySrc;
           }
       }
   };
});

如果图片加载失败的时候，可以调用image的onerror事件，来定义需要执行的函数。或者用onabort来定义放弃加载图片所要执行的函数。
在这里插入图片描述