Skip to content

Commit f2d7c62

Browse files
author
zhangbo
committed
demo完成
1 parent bc46673 commit f2d7c62

File tree

9 files changed

+264
-63
lines changed

9 files changed

+264
-63
lines changed

‎README.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,11 @@
44
### 关于
55
* 基于angular 编写的可复用图片懒加载指令
66

7+
### 思路
8+
* img的src不要使用真实， 用一个属性保存在元素上
9+
* 把所有需要使用延迟加载的元素放到一个数组中
10+
* 初始化的时候检查数组中的元素是否在出视范围内 ,可视范围内即加载
11+
* 加载完成的img从列队中删除
712

813

914
### 安装
@@ -23,6 +28,26 @@ gulp serve
2328
```
2429

2530
### 使用
31+
###html
32+
```
33+
<body ng-app="demo" ng-controller="demoCtro" class="row text-center">
34+
<div class="content">
35+
<img src="" ng-repeat="item in imgs track by $index" data-ui-lazyload="{{item}}" />
36+
</div>
37+
</body>
38+
39+
```
40+
41+
###js
42+
```
43+
44+
// 在你的module里添加lazyload依赖就好
45+
var app = angular.module('demo' , ['lazyload']);
46+
app.controller('demoCtro' , function($scope){
47+
48+
}
49+
50+
```
2651
#### Q&A
2752
@febobo
2853

‎bower.json

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,21 @@
11
{
2-
"name": "angular-pagination",
2+
"name": "angular-lazyload",
33
"version": "1.0.0",
4-
"homepage": "https://github.com/febobo/angular-paganation",
4+
"homepage": "https://github.com/angular-directive/angular-lazyload",
55
"authors": [
66
"febobo"
77
],
8-
"description": "基于angular 扩展的可复用的分页指令",
9-
"main": "angular-pagination.min.js",
8+
"description": "基于angular 扩展的可复用的图片懒加载指令",
9+
"main": "dist/angular-lazyload.js",
1010
"keywords": [
11-
"angular"
11+
"angular",
12+
"lazyload"
1213
],
1314
"license": "MIT",
1415
"ignore": [
1516
"**/.*",
1617
"node_modules",
17-
"bower_components",
18-
"test",
19-
"tests"
18+
"bower_components"
2019
],
2120
"devDependencies": {
2221
"angular": "~1.4.3",

‎demo/demo.html

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎demo/index.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,9 @@
1313
<h1 id="" class="text-center" style="margin: 100px;">
1414
{{title}}
1515
</h1>
16+
<button class="btn btn-success" style="margin-bottom: 15px;">查看浏览器network里的请求情况</button>
1617
<div class="content">
17-
<img src="{{item}}" ng-repeat="item in imgs track by $index" />
18+
<img src="" ng-repeat="item in imgs track by $index" data-ui-lazyload="{{item}}" watch="watch"/>
1819
</div>
1920
</body>
2021
</html>
@@ -25,6 +26,7 @@ <h1 id="" class="text-center" style="margin: 100px;">
2526

2627
$scope.title = 'lazyload-directive';
2728

29+
$scope.watch = {};
2830
// 图片集合
2931
$scope.imgs = [];
3032

‎demo/lazyload.css

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
.content{
22
width : 200px;
33
border : 2px solid #eee;
4-
height : 400px;
5-
overflow-x : hidden ;
6-
overflow-y : scroll;
74
margin : 0 auto ;
85
}
96
.content img{
107
width : 100%;
8+
max-width : 100%;
9+
height : 100px;
1110
margin-bottom : 2px;
12-
1311
}

‎demo/lazyload.js

Lines changed: 96 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,107 @@
1+
'use strict';
2+
13
(function(){
24

35
var lazyload = angular.module('lazyload' , []);
46

5-
lazyload.directive('uiLazyload' , function(){
7+
lazyload.directive('uiLazyload' , ['$document' , '$window' ,function(document , window){
8+
9+
var $ = function(ele){
10+
return angular.element(ele);
11+
}
12+
13+
var elements = (function(){
14+
var _uid =0 ;
15+
var _list = [];
16+
17+
return {
18+
19+
// 获取图片集合
20+
push : function(ele){
21+
_list[_uid ++] = ele ;
22+
},
23+
24+
// 从集合中删除已load的子集
25+
del : function(key){
26+
_list[key] && delete _list[key] ;
27+
},
28+
29+
get : function(){
30+
return _list ;
31+
},
32+
33+
size : function(){
34+
return _list.length ;
35+
}
36+
37+
}
38+
39+
})();
40+
41+
42+
// 元素是否在可视区域
43+
var isVisible = function(ele){
44+
45+
var rect = ele[0].getBoundingClientRect();
46+
rect.offsetTop = ele[0].offsetTop
47+
48+
if($(window)[0].parent.innerHeight < rect.offsetTop
49+
&& $(window)[0].pageYOffset + $(window)[0].parent.innerHeight < rect.offsetTop
50+
|| $(window)[0].pageYOffset >( rect.offsetTop + rect.height)) {
51+
return false;
52+
}else{
53+
return true;
54+
}
55+
}
56+
57+
// 检查图片是否可见
58+
var checkImage = function(){
59+
var eles = elements.get();
60+
angular.forEach(eles ,function(v , k){
61+
isVisible(v.elem) ? eles[k].load(k) : false ;
62+
})
63+
}
64+
65+
var initLazyload = function(){
66+
checkImage();
67+
$(window).on('scroll' , checkImage)
68+
}
69+
670
return {
771
restrict : 'EA',
72+
scope : {
73+
watch : '='
74+
},
875
link : function(scope , ele , attrs){
9-
console.log(ele)
76+
77+
ele.css({
78+
'background' : '#fff',
79+
'opacity' : 0,
80+
'transition' : 'opacity 1s',
81+
'-webkit-transition' : 'opacity 1s',
82+
'animation-duration': '1s'
83+
})
84+
85+
elements.push({
86+
elem : ele ,
87+
load : function(key){
88+
89+
ele.attr('src' ,attrs['uiLazyload']);
90+
91+
ele.on('load' , function(){
92+
ele.css({
93+
'opacity' : '1'
94+
})
95+
})
96+
97+
// 加载后从列队里删除
98+
if(key >=0 ) elements.del(key);
99+
}
100+
});
101+
102+
initLazyload();
10103
}
11104
}
12-
})
105+
}])
13106
})()
14107

‎dist/lazyload.js

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
'use strict';
2+
3+
(function(){
4+
5+
var lazyload = angular.module('lazyload' , []);
6+
7+
lazyload.directive('uiLazyload' , ['$document' , '$window' ,function(document , window){
8+
9+
var $ = function(ele){
10+
return angular.element(ele);
11+
}
12+
13+
var elements = (function(){
14+
var _uid =0 ;
15+
var _list = [];
16+
17+
return {
18+
19+
// 获取图片集合
20+
push : function(ele){
21+
_list[_uid ++] = ele ;
22+
},
23+
24+
// 从集合中删除已load的子集
25+
del : function(key){
26+
_list[key] && delete _list[key] ;
27+
},
28+
29+
get : function(){
30+
return _list ;
31+
},
32+
33+
size : function(){
34+
return _list.length ;
35+
}
36+
37+
}
38+
39+
})();
40+
41+
42+
// 元素是否在可视区域
43+
var isVisible = function(ele){
44+
45+
var rect = ele[0].getBoundingClientRect();
46+
rect.offsetTop = ele[0].offsetTop
47+
48+
if($(window)[0].parent.innerHeight < rect.offsetTop
49+
&& $(window)[0].pageYOffset + $(window)[0].parent.innerHeight < rect.offsetTop
50+
|| $(window)[0].pageYOffset >( rect.offsetTop + rect.height)) {
51+
return false;
52+
}else{
53+
return true;
54+
}
55+
}
56+
57+
// 检查图片是否可见
58+
var checkImage = function(){
59+
var eles = elements.get();
60+
angular.forEach(eles ,function(v , k){
61+
isVisible(v.elem) ? eles[k].load(k) : false ;
62+
})
63+
}
64+
65+
var initLazyload = function(){
66+
checkImage();
67+
$(window).on('scroll' , checkImage)
68+
}
69+
70+
return {
71+
restrict : 'EA',
72+
scope : {
73+
watch : '='
74+
},
75+
link : function(scope , ele , attrs){
76+
77+
ele.css({
78+
'background' : '#fff',
79+
'opacity' : 0,
80+
'transition' : 'opacity 1s',
81+
'-webkit-transition' : 'opacity 1s',
82+
'animation-duration': '1s'
83+
})
84+
85+
elements.push({
86+
elem : ele ,
87+
load : function(key){
88+
89+
ele.attr('src' ,attrs['uiLazyload']);
90+
91+
ele.on('load' , function(){
92+
ele.css({
93+
'opacity' : '1'
94+
})
95+
})
96+
97+
// 加载后从列队里删除
98+
if(key >=0 ) elements.del(key);
99+
}
100+
});
101+
102+
initLazyload();
103+
}
104+
}
105+
}])
106+
})()
107+

‎gulpfile.js

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
var gulp = require('gulp');
22
var browserSync = require('browser-sync').create();
3-
3+
var build = require('gulp-build');
44
gulp.paths = {
55
demo : 'demo'
66
}
@@ -17,13 +17,27 @@ gulp.task('browser-sync', function() {
1717
},
1818
startPath: '/',
1919
files : gulp.paths.demo + '/*.*',
20-
//port : 3001
20+
port : 3002
2121
});
2222

2323
gulp.watch( gulp.paths.demo + "/*.*").on('change', browserSync.reload);
2424
});
2525

2626

27+
var options = {
28+
helpers: [{
29+
name: 'addition',
30+
fn: function(a, b) { return a + b; }
31+
}]
32+
};
33+
34+
gulp.task('build' , function(){
35+
gulp.src(gulp.paths.demo + "/*.js")
36+
.pipe(build({ GA_ID: '123456' } , options))
37+
.pipe(gulp.dest('dist'))
38+
})
39+
40+
2741
gulp.task('serve' , ['browser-sync']);
2842

2943

0 commit comments

Comments
 (0)