Angular-imglazyload NPM

#angular-lazyload

关于

基于angular 编写的可复用图片懒加载指令

思路

图片的src不要使用真实地址，用一个属性保存在元素上
把所有需要使用延迟加载的图片放到一个数组中
初始化的时候检查数组中的元素是否在可视范围内 ,可视范围内即加载
给window绑定滚动事件检查图片是否在可视范围内
加载完成的图片从列队中删除

应用场景

很多图片没出视在视野就已经加载了，用angular-imglazyload 可以做到让图片出现在可视范围内在去加载，避免不必要的请求

安装

克隆项目到本地
git clone https://github.com/angular-directive/angular-lazyload.git

要跑demo环境要求
node , bower , npm , gulp

安装
npm install && bower install

运行
gulp serve

使用

###html

<body   ng-app="demo" ng-controller="demoCtro" class="row text-center">
   <div class="content">
     <img src="" ng-repeat="item in imgs track by $index" data-ui-lazyload="{{your img url}}" />
   </div>
</body>

###js

  // 在你的module里添加lazyload依赖就好
  var app = angular.module('demo' , ['lazyload']);

Q&A

@febobo

angular lazyload directive

@infinitebrahmanuniverse/nolb-angular-i @everything-registry/sub-chunk-1133 @zalastax/nolb-angular-i

1.0.0

9 years ago