File tree Expand file tree Collapse file tree 1 file changed +4
-51
lines changed Expand file tree Collapse file tree 1 file changed +4
-51
lines changed Original file line number Diff line number Diff line change 1
- #angular-lazyload
1
+ #angular-problem
2
2
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
53
6
@febobo
54
7
You can’t perform that action at this time.
0 commit comments