├── README.md
├── test
└── lazy-load.html
├── src
└── sloth.js
└── gulpfile.js
/README.md:
--------------------------------------------------------------------------------
1 | # sloth
2 | a simple images lazy load plugin.
3 |
4 |
5 | # usage
6 |
7 | ## in html
8 | ```html
9 | ![]()
10 | ```
11 | ### js
12 | ```javascript
13 |
26 | ```
27 |
28 |
29 | # License
30 | MIT
--------------------------------------------------------------------------------
/test/lazy-load.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Sloth Test
5 |
6 |
7 |
8 |
15 |
16 |
17 |
18 | Test Page
19 |
20 |
21 |
![]()
22 |
![]()
26 |
27 |
28 | ![]()
29 |
30 | bottom
31 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/src/sloth.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This project is used to lazy load images.
3 | * Sloth.js v1.0
4 | * @Date 2016/05/26
5 | * @Author Ziv
6 | */
7 |
8 |
9 | (function(factory) {
10 | "use strict";
11 | if (typeof exports === "object" && typeof module === "object") {
12 | module.exports = factory();
13 | } else if (typeof define === "function" && (define.amd || define.cmd)) {
14 | define(factory);
15 | } else {
16 | window.Sloth = factory();
17 | }
18 |
19 | })(function() {
20 | "use strict";
21 |
22 | var _lazyFlag = "sloth-img"; // The mark of lazy load
23 | var _viewPortHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
24 | _viewPortWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
25 |
26 | function Sloth(elementId) {
27 | this.elementId = elementId || "";
28 |
29 | if (this.elementId && this.elementId.indexOf("#") < 0) {
30 | this.elementId += "#";
31 | }
32 |
33 | if (!this._images) { // Get All Images
34 | this._images = (this.elementId ?
35 | document.querySelector(elementId).querySelectorAll('img[' + _lazyFlag + ']') :
36 | document.querySelectorAll('img[' + _lazyFlag + ']')) || [];
37 | }
38 | }
39 |
40 | Sloth.prototype.load = function() { // Auto load
41 | var images = this._images;
42 | if (images.length > 0) {
43 | for (var i = 0; i < images.length; i++) {
44 | var img = images[i];
45 | if (this.isOnVerticalViewPort(img) && this.isOnHorizontalViewPort(img)) {
46 | var url = img.getAttribute(_lazyFlag);
47 | img.setAttribute("src", url);
48 | img.isload = true;
49 | }
50 | }
51 | }
52 | };
53 |
54 | Sloth.prototype.init = function() {
55 | var self = this;
56 | self.load();
57 | window.addEventListener("scroll", function(e) {
58 | self.load();
59 | }, false);
60 | };
61 |
62 | Sloth.prototype.isOnVerticalViewPort = function(ele) {
63 | var rect = ele.getBoundingClientRect();
64 | return rect.top > 0 && rect.top <= _viewPortHeight;
65 | };
66 |
67 | Sloth.prototype.isOnHorizontalViewPort = function(ele) {
68 | var rect = ele.getBoundingClientRect();
69 | return rect.left > 0 && rect.left <= _viewPortWidth;
70 | };
71 |
72 | return Sloth;
73 | });
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 | var fileInclude = require("gulp-file-include");
3 | var exec = require('child_process').exec;
4 | var minifyCss = require('gulp-minify-css');
5 | var imagemin = require('gulp-imagemin');
6 | var pngquant = require('imagemin-pngquant');
7 | var gulpif = require('gulp-if');
8 | var uglify = require('gulp-uglify');
9 | var useref = require('gulp-useref');
10 | var sass = require('gulp-sass');
11 | var clean = require('gulp-clean');
12 |
13 | var paths = {
14 | html: [
15 | "src/*.html",
16 | ],
17 | images: [
18 | "src/images/*",
19 | ],
20 | js: [
21 | "src/scripts/**/*.js",
22 | ],
23 | sass: [
24 | "src/sass/**/*.scss",
25 | ],
26 | font: [
27 | "src/fonts/*.ttf"
28 | ]
29 | };
30 |
31 | var output = ".temp"; // 文件构建输出地址
32 | var dist = "dist"; // dist目录
33 |
34 | /**
35 | * Task
36 | */
37 | gulp.task('images', function() {
38 | gulp.src(paths.images)
39 | .pipe(gulp.dest(output + "/images"));
40 | });
41 |
42 | gulp.task('html', function() {
43 | gulp.src(paths.html)
44 | .pipe(fileInclude())
45 | .pipe(gulp.dest(output));
46 | });
47 |
48 | gulp.task('js', function() {
49 | gulp.src(paths.js)
50 | .pipe(gulp.dest(output + "/js"));
51 | });
52 |
53 | gulp.task('font', function() {
54 | gulp.src(paths.font)
55 | .pipe(gulp.dest(output + "/css/fonts"));
56 | });
57 |
58 | gulp.task('sass', function() {
59 | return gulp.src(paths.sass)
60 | .pipe(sass().on('error', sass.logError))
61 | .pipe(gulp.dest(output + '/css'));
62 | });
63 |
64 | // =============压缩合并build资源============== //
65 | gulp.task('dist', ['run.dist'], function() {
66 |
67 | gulp.src(dist+"/**/*")
68 | .pipe(clean({force: true}));
69 |
70 | gulp.src(output+"/*.html")
71 | .pipe(useref())
72 | .pipe(gulpif('*.css', minifyCss()))
73 | .pipe(gulpif('*.js', uglify({
74 | mangle: false
75 | })))
76 | .pipe(gulp.dest(dist));
77 |
78 | gulp.src(paths.font)
79 | .pipe(gulp.dest(dist+"/css/fonts"));
80 |
81 | gulp.src(paths.images)
82 | .pipe(imagemin({
83 | progressive: true,
84 | svgoPlugins: [{removeViewBox: false}],
85 | use: [pngquant()]
86 | }))
87 | .pipe(gulp.dest(dist+"/images"));
88 | });
89 |
90 | gulp.task('run.dist', function() {
91 | exec("node app.js /dist", function(err, stdout, stderr) {
92 | console.log(stdout);
93 | if (err) console.log("start server error:" + err);
94 | });
95 | });
96 |
97 | gulp.task('run.build', function() {
98 | exec("node app.js /.temp", function(err, stdout, stderr) {
99 | console.log(stdout);
100 | if (err) console.log("start server error:" + err);
101 | });
102 | });
103 |
104 | // 默认构建
105 | gulp.task('default', ['images', 'sass', 'html', 'js', 'font', 'run.build'], function() {
106 | gulp.watch(paths.sass, ['sass']);
107 | gulp.watch(paths.html, ['html']);
108 | gulp.watch(paths.images, ['images']);
109 | gulp.watch(paths.js, ['js']);
110 | });
--------------------------------------------------------------------------------