Skip to content

Commit 635bf37

Browse files
author
0xAX
committed
1.0.0
0 parents  commit 635bf37

22 files changed

+724
-0
lines changed

‎.bowerrc

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"directory": "bower_components",
3+
"json": "bower.json"
4+
}

‎.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.sass-cache
2+
*.DS_Store
3+
node_modules
4+
bower_components
5+
coverage

‎Gruntfile.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
'use strict';
2+
3+
var path = require('path');
4+
5+
module.exports = function(grunt) {
6+
7+
require('load-grunt-tasks')(grunt);
8+
9+
grunt.initConfig({
10+
dirs: {
11+
src: 'src',
12+
dest: 'dist'
13+
},
14+
concat: {
15+
options: {},
16+
dist: {
17+
src: ['<%= dirs.src %>/*.js', '<%= dirs.src %>/**/*.js'],
18+
dest: '<%= dirs.dest %>/angular-lazy-load.min.js'
19+
}
20+
}
21+
});
22+
23+
grunt.registerTask('build', ['concat']);
24+
}

‎README.md

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
angular.lazy.load.js
2+
=====================
3+
4+
Lazy Load Plugin for [Angular.js](http://angularjs.org/).
5+
6+
Usage
7+
--------------
8+
9+
Just add `lazy` directive instead `src` attribute:
10+
11+
```html
12+
<img lazy="img/BIG_Zira_Island_Copyright_BIG_1_S.jpg" style="display: block; left: 10px; margin-top: 10px;"></img>
13+
```
14+
15+
TODO
16+
---------------
17+
18+
1. Add grunt uglify.
19+
20+
Contribution
21+
---------------
22+
23+
1. Fork main [repo](https://github.com/angularify/angular.lazy.load.js)
24+
2. Make you changes.
25+
3. Send pull request.
26+
4. Thank you.
27+
28+
Author
29+
----------------
30+
31+
[@0xAX](https://twitter.com/0xAX)

‎bower.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "angular.lazy.load.js",
3+
"description": "Angular image lazy loading",
4+
"version": "0.1.1",
5+
"author": "0xAX",
6+
"repository": {
7+
"type": "git",
8+
"url": "git://github.com/angularify/angular.lazyload.js.git"
9+
},
10+
"main": [
11+
"dist/angular-lazy-load.js"
12+
],
13+
"ignore": [
14+
"demo"
15+
],
16+
"dependencies": {
17+
"angular": "~1.2.10"
18+
}
19+
}

‎demo/demoCtrl.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
function RootController($scope){
2+
3+
}

‎dist/.gitskeep

Whitespace-only changes.

‎dist/angular-lazy-load.min.js

+279
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎img/800px-Big_Sur_June_2008.jpg

97.4 KB
Loading

‎img/BIG_Zira_Island_Copyright_BIG_1_S.jpg

672 KB
Loading

‎img/Big_wave.jpg

241 KB
Loading

‎img/Fronalpstock_big.jpg

14 MB
Loading

‎img/bigcat.JPG

1.33 MB
Loading

‎img/orionfull_jcc.jpg

81 KB
Loading

‎img/stock_big.jpg

14 MB
Loading

‎index.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en" ng-app="angularify.angular-lazyload">
3+
<head>
4+
<meta charset=utf-8>
5+
<title>Angularify - lazy loading</title>
6+
<link rel="stylesheet" type="text/css" href="src/css/lazy.css">
7+
</head>
8+
9+
<body ng-controller="RootController">
10+
<div>
11+
<img lazy="img/800px-Big_Sur_June_2008.jpg" height="600px" width="800px"
12+
style="display: block; left: 10px; margin-top: 10px;" ></img>
13+
<img lazy="img/BIG_Zira_Island_Copyright_BIG_1_S.jpg" height="600px" width="800px"
14+
style="display: block; left: 10px; margin-top: 10px;"></img>
15+
<img lazy="img/Big_wave.jpg" style="display: block; left: 10px;" height="600px" width="800px"></img>
16+
<img lazy="img/Fronalpstock_big.jpg" style="display: block; left: 10px;" height="600px" width="800px"></img>
17+
<img lazy="img/orionfull_jcc.jpg" style="display: block; left: 10px;" height="600px" width="800px"></img>
18+
<img lazy="img/stock_big.jpg" style="display: block; left: 10px;"></img>
19+
</div>
20+
21+
<script src="src/lib/angular.min.js" type="text/javascript"></script>
22+
<script src="src/angular-lazyload.js" type="text/javascript"></script>
23+
<script src="src/directives/lazy-load.js" type="text/javascript"></script>
24+
<script src="demo/demoCtrl.js" type="text/javascript"></script>
25+
26+
</body>
27+
</html>

‎index_not_lazy.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en" ng-app="angularify.angular-lazyload">
3+
<head>
4+
<meta charset=utf-8>
5+
<title>Angularify - lazy loading</title>
6+
<link rel="stylesheet" type="text/css" href="src/css/lazy.css">
7+
</head>
8+
9+
<body ng-controller="RootController">
10+
<div>
11+
<img src="img/800px-Big_Sur_June_2008.jpg" height="600px" width="800px"
12+
style="display: block; left: 10px; margin-top: 10px;" ></img>
13+
<img src="img/BIG_Zira_Island_Copyright_BIG_1_S.jpg" height="600px" width="800px"
14+
style="display: block; left: 10px; margin-top: 10px;"></img>
15+
<img src="img/Big_wave.jpg" style="display: block; left: 10px;" height="600px" width="800px"></img>
16+
<img src="img/Fronalpstock_big.jpg" style="display: block; left: 10px;" height="600px" width="800px"></img>
17+
<img src="img/orionfull_jcc.jpg" style="display: block; left: 10px;" height="600px" width="800px"></img>
18+
<img src="img/stock_big.jpg" style="display: block; left: 10px;"></img>
19+
</div>
20+
21+
<script src="src/lib/angular.min.js" type="text/javascript"></script>
22+
<script src="src/angular-lazyload.js" type="text/javascript"></script>
23+
<script src="src/directives/lazy-load.js" type="text/javascript"></script>
24+
<script src="demo/demoCtrl.js" type="text/javascript"></script>
25+
26+
</body>
27+
</html>

‎package.json

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "angular.lazyload.js",
3+
"description": "Angular image lazy loading",
4+
"version": "0.0.1",
5+
"author": "0xAX",
6+
"repository": {
7+
"type": "git",
8+
"url": "git://github.com/angularify/angular.lazyload.js.git"
9+
},
10+
"licenses": [
11+
{
12+
"type": "MIT",
13+
"url": "http://revolunet.mit-license.org"
14+
}
15+
],
16+
"dependencies": {
17+
"grunt": "~0.4.2",
18+
"grunt-contrib-concat": "^0.3.0",
19+
"grunt-contrib-copy": "^0.5.0",
20+
"grunt-contrib-cssmin": "^0.8.0",
21+
"grunt-contrib-jshint": "^0.8.0",
22+
"grunt-contrib-uglify": "^0.3.2",
23+
"grunt-contrib-watch": "^0.5.3",
24+
"grunt-conventional-changelog": "~1.1.0",
25+
"load-grunt-tasks": "~0.3.0",
26+
"requirejs": "~2.1.11"
27+
}
28+
}

‎src/angular-lazyload.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/*
2+
* Main lazy load module
3+
*/
4+
angular.module('angularify.angular-lazyload', []);

‎src/css/lazy.css

Whitespace-only changes.

‎src/directives/lazy-load.js

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
angular.module('angularify.angular-lazyload')
2+
3+
.directive('lazy', function () {
4+
return {
5+
restrict: 'A',
6+
scope: {obj : '='},
7+
controller: function($scope, $location, $element, $attrs, $window, $document) {
8+
// image path
9+
var img_path = $attrs.lazy;
10+
// get current page
11+
var $page = angular.element(window);
12+
13+
//
14+
// Get element position
15+
//
16+
function getPos(ele){
17+
var x = 0;
18+
var y = 0;
19+
while(true){
20+
x += ele.offsetLeft;
21+
y += ele.offsetTop;
22+
if(ele.offsetParent === null)
23+
break;
24+
ele = ele.offsetParent;
25+
}
26+
return [x, y];
27+
}
28+
29+
var leftPosition = getPos($element[0])[0];
30+
var topPosition = getPos($element[0])[1];
31+
32+
function load_images() {
33+
if ($scope.loaded == true)
34+
return;
35+
36+
// get top scrolling position
37+
var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
38+
// get left scrolling position
39+
var scrollLeft = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
40+
// get window height
41+
var windowHeight = $window.innerHeight;
42+
// get widnow width
43+
var windowWidth = $window.innerWidth;
44+
45+
// calculate visible Y at the bottom
46+
var visibleY = scrollTop + innerHeight;
47+
48+
if ($element[0].getBoundingClientRect().top <= visibleY){
49+
// load image
50+
$element[0].src = img_path;
51+
// this image loaded
52+
$scope.loaded = true;
53+
}
54+
}
55+
56+
//
57+
// Init document
58+
//
59+
angular.element(window).bind('load', function(){
60+
load_images();
61+
});
62+
63+
//
64+
// Scroll handler
65+
//
66+
angular.element(document).bind('scroll', function() {
67+
load_images();
68+
});
69+
}
70+
}
71+
});

0 commit comments

Comments
 (0)