File tree Expand file tree Collapse file tree 1 file changed +7
-6
lines changed Expand file tree Collapse file tree 1 file changed +7
-6
lines changed Original file line number Diff line number Diff line change 5
5
* 基于angular 编写的可复用图片懒加载指令
6
6
7
7
### 思路
8
- * img的src不要使用真实 , 用一个属性保存在元素上
9
- * 把所有需要使用延迟加载的元素放到一个数组中
8
+ * 图片的src不要使用真实地址 , 用一个属性保存在元素上
9
+ * 把所有需要使用延迟加载的图片元素放到一个数组中
10
10
* 初始化的时候检查数组中的元素是否在出视范围内 ,可视范围内即加载
11
+ * 给window绑定滚动事件来检查图片是否需要加载
11
12
* 加载完成的img从列队中删除
12
13
14
+ ### 应用场景
15
+ * 当过多的图片还没出现在视野的时候就已经下载,可以使用` angular-imglazyload ` 来避免这种无谓的请求提高性能
16
+
13
17
14
18
### 安装
19
+ - 项目使用可以直接 ` bower install angular-imglazyload ` 下载至项目使用 ,学习的同学可参照下面步骤
15
20
```
16
21
克隆项目到本地
17
22
git clone https://github.com/angular-directive/angular-lazyload.git
@@ -40,12 +45,8 @@ gulp serve
40
45
41
46
###js
42
47
```
43
-
44
48
// 在你的module里添加lazyload依赖就好
45
49
var app = angular.module('demo' , ['lazyload']);
46
- app.controller('demoCtro' , function($scope){
47
-
48
- }
49
50
50
51
```
51
52
#### Q&A
You can’t perform that action at this time.
0 commit comments