Skip to content

Commit 8813a54

Browse files
author
zhangbo
committed
持续更新
1 parent 8e5ae29 commit 8813a54

File tree

1 file changed

+4
-51
lines changed

1 file changed

+4
-51
lines changed

README.md

Lines changed: 4 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,7 @@
1-
#angular-lazyload
1+
#angular-problem
22

3-
4-
### 关于
5-
* 基于angular 编写的可复用图片懒加载指令
6-
7-
### 思路
8-
* 图片的src不要使用真实地址, 用一个属性保存在元素上
9-
* 把所有需要使用延迟加载的图片元素放到一个数组中
10-
* 初始化的时候检查数组中的元素是否在出视范围内 ,可视范围内即加载
11-
* 给window绑定滚动事件来检查图片是否需要加载
12-
* 加载完成的img从列队中删除
13-
14-
### 应用场景
15-
* 当过多的图片还没出现在视野的时候就已经下载,可以使用`angular-imglazyload` 来避免这种无谓的请求提高性能
16-
17-
18-
### 安装
19-
- 项目使用可以直接 `bower install angular-imglazyload` 下载至项目使用 ,学习的同学可参照下面步骤
20-
```
21-
克隆项目到本地
22-
git clone https://github.com/angular-directive/angular-lazyload.git
23-
24-
要跑demo环境要求
25-
node , bower , npm , gulp
26-
27-
安装
28-
npm install && bower install
29-
30-
运行
31-
gulp serve
32-
33-
```
34-
35-
### 使用
36-
###html
37-
```
38-
<body ng-app="demo" ng-controller="demoCtro" class="row text-center">
39-
<div class="content">
40-
<img src="" ng-repeat="item in imgs track by $index" data-ui-lazyload="{{item}}" />
41-
</div>
42-
</body>
43-
44-
```
45-
46-
###js
47-
```
48-
// 在你的module里添加lazyload依赖就好
49-
var app = angular.module('demo' , ['lazyload']);
50-
51-
```
52-
#### Q&A
3+
# 关于
4+
* angular开发中的一些问题及思路 , 持续更新中 ...
5+
# Q&A
536
@febobo
547

0 commit comments

Comments
 (0)