playground
/
echo
mirror of https://github.com/toddmotto/echo.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Echo.js v1.2.0

pull/4/head
Todd Motto 11 years ago
parent
4c2ef2fc4f
commit
9d07ee076c
9 changed files with 187 additions and 245 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      .editorconfig
  2. 17
      .gitignore
  3. 3
      .jshintrc
  4. 131
      Gruntfile.js
  5. 8
      README.md
  6. 95
      dist/echo.js
  7. 12
      dist/echo.min.js
  8. 37
      package.json
  9. 85
      src/echo.js

2
.editorconfig
Unescape View File

@ -1,5 +1,3 @@
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org
root = true

17
.gitignore vendored
Unescape View File

@ -1,4 +1,17 @@
# Node
node_modules
## OS X
.DS_Store
.tmp
.sass-cache
.AppleDouble
.LSOverride
Icon
._*
.Spotlight-V100
.Trashes
## Windows
Thumbs.db
ehthumbs.db
Desktop.ini
$RECYCLE.BIN/

3
.jshintrc
Unescape View File

@ -1,7 +1,6 @@
{
"node": true,
"browser": true,
"es5": true,
"esnext": true,
"bitwise": true,
"camelcase": true,
@ -17,6 +16,6 @@
"undef": true,
"unused": true,
"strict": true,
"trailing": false,
"trailing": true,
"smarttabs": true
}

131
Gruntfile.js
Unescape View File

@ -1,87 +1,104 @@
/*!
* Gruntfile.js configuration
/*
* Gruntfile.js
* @author Todd Motto
* @version 1.0.0
*/
'use strict';
module.exports = function ( grunt ) {
var LIVERELOAD_PORT = 35729;
/*
* Dynamically load the npm tasks
*/
require( 'matchdep' ).filterDev('grunt-*').forEach( grunt.loadNpmTasks );
var lrSnippet = require('connect-livereload')({
port: LIVERELOAD_PORT
});
/*
* Grunt init
*/
grunt.initConfig({
var mountFolder = function (connect, dir) {
return connect.static(require('path').resolve(dir));
};
/*
* Grunt JSON for project
*/
pkg: grunt.file.readJSON( 'package.json' ),
module.exports = function (grunt) {
/*
* Credit banner
*/
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
project: { name: 'echo' },
connect: {
options: {
port: 9000,
hostname: 'localhost'
},
livereload: {
options: {
middleware: function (connect) {
return [lrSnippet, mountFolder(connect, 'dist')];
}
}
}
},
tag: {
banner: "/*!\n" +
" * <%= pkg.title %>\n" +
" * @version <%= pkg.version %>\n" +
" * @author <%= pkg.author[0].name %> <%= pkg.author[1].url %>\n" +
" * Project: <%= pkg.homepage %>\n" +
" *\n" +
" * <%= pkg.description %>\n" +
" * Copyright <%= pkg.year %>." +
" <%= pkg.licenses[0].type %> licensed.\n" +
" */\n"
banner: '/*!\n' +
' * <%= pkg.name %> v<%= pkg.version %>\n' +
' * <%= pkg.description %>\n' +
' * Project: <%= pkg.homepage %>\n' +
' * by <%= pkg.author.name %>: <%= pkg.author.url %>\n' +
' * Copyright.' +
' <%= pkg.licenses[0].type %> licensed.\n' +
' */\n'
},
/*
* jsHint
*/
jshint: {
files: ["src/echo.js"],
options: {
jshintrc: ".jshintrc"
}
jshintrc: '.jshintrc'
},
files: 'src/<%= project.name %>.js',
},
/*
* Concat
*/
concat: {
dist: {
src: ["src/echo.js"],
dest: "dist/echo.js"
src: ['src/<%= project.name %>.js'],
dest: 'dist/<%= project.name %>.js'
},
options: {
banner: "<%= tag.banner %>"
banner: '<%= tag.banner %>'
}
},
/*
* UglifyJS
*/
uglify: {
files: {
src: ["dist/echo.js"],
dest: "dist/echo.min.js"
src: ['dist/<%= project.name %>.js'],
dest: 'dist/<%= project.name %>.min.js'
},
options: {
banner: "<%= tag.banner %>"
banner: '<%= tag.banner %>'
}
},
open: {
server: {
path: 'http://localhost:<%= connect.options.port %>'
}
},
watch: {
concat: {
files: 'src/{,*/}*.js',
tasks: ['concat:dist', 'uglify']
},
livereload: {
options: {
livereload: LIVERELOAD_PORT
},
files: [
'{,*/}*.html',
'dist/{,*/}*.js'
]
}
}
});
/*
* Register tasks
*/
grunt.registerTask("default", [
"jshint",
"concat",
"uglify"
grunt.registerTask('default' , [
'jshint',
'concat:dist',
'uglify',
'connect:livereload',
'open',
'watch'
]);
};

8
README.md
Unescape View File

@ -1,6 +1,6 @@
# Echo [![Build Status](https://travis-ci.org/toddmotto/echo.png)](https://travis-ci.org/toddmotto/echo)
Echo, simple JavaScript image lazy-loading, no jQuery! Super fast and easy.
Echo is a standalone JavaScript lazy-loading image tool. Echo is fast, less than 1KB and uses HTML5 data-* attributes.
```html
<img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg">
@ -23,11 +23,15 @@ Drop your files into your required folders, make sure you're using the file(s) f
<body>
<!-- html content above -->
<script src="dist/echo.js"></script>
<script>
// call Echo.js
Echo.init();
</script>
</body>
```
## Configuring Echo
Echo config is super-simple, just add the image that needs to load when visible in a `data-echo` attribute:
Add the image that needs to load when visible in a `data-echo` attribute:
```html
<img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg">

95
dist/echo.js vendored
Unescape View File

@ -1,92 +1,41 @@
/*!
* Echo
* @version 1.1.0
* @author Todd Motto http://toddmotto.com
* Echo v1.2.0
* Lazy-loading images with data-* attributes
* Project: https://github.com/toddmotto/echo
*
* Raw JavaScript lazy-loading images with HTML5 data-* attributes.
* Copyright 2013. MIT licensed.
* by Todd Motto: http://toddmotto.com
* Copyright. MIT licensed.
*/
window.echo = (function (window, document, undefined) {
window.Echo = (function (window, document, undefined) {
'use strict';
/*
* Constructor function
*/
var Echo = function (elem) {
this.elem = elem;
};
/*
* Images for echoing
*/
var echoStore = [];
var store;
/*
* Element in viewport logic
*/
var scrolledIntoView = function (element) {
var coords = element.getBoundingClientRect();
var _inView = function (img) {
var coords = img.getBoundingClientRect();
return ((coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight));
};
/*
* Changing src attr logic
*/
var echoSrc = function (img, callback) {
img.src = img.getAttribute('data-echo');
if (callback) {
callback();
var _pollImages = function () {
for (var i = 0; i < store.length; i++) {
var self = store[i];
if (_inView(self)) {
self.src = self.getAttribute('data-echo');
if (store.indexOf(self) !== -1) {
store.splice(i, 1);
}
};
/*
* Remove loaded item from array
*/
var removeEcho = function (element, index) {
if (echoStore.indexOf(element) !== -1) {
echoStore.splice(index, 1);
}
};
/*
* Echo the images and callbacks
*/
var echoImages = function () {
for (var i = 0; i < echoStore.length; i++) {
var self = echoStore[i];
if (scrolledIntoView(self)) {
echoSrc(self, removeEcho(self, i));
}
}
};
/*
* Prototypal setup
*/
Echo.prototype = {
init : function () {
echoStore.push(this.elem);
}
var init = function () {
store = [].slice.call(document.querySelectorAll('[data-echo]'));
_pollImages();
window.onscroll = _pollImages;
};
/*
* Initiate the plugin
*/
var lazyImgs = document.querySelectorAll('img[data-echo]');
for (var i = 0; i < lazyImgs.length; i++) {
new Echo(lazyImgs[i]).init();
}
/*
* Bind the events
*/
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', echoImages, false);
} else {
window.onload = echoImages;
}
window.onscroll = echoImages;
return {
init: init
};
})(window, document);

12
dist/echo.min.js vendored
Unescape View File

@ -1,10 +1,8 @@
/*!
* Echo
* @version 1.1.0
* @author Todd Motto http://toddmotto.com
* Echo v1.2.0
* Lazy-loading images with data-* attributes
* Project: https://github.com/toddmotto/echo
*
* Raw JavaScript lazy-loading images with HTML5 data-* attributes.
* Copyright 2013. MIT licensed.
* by Todd Motto: http://toddmotto.com
* Copyright. MIT licensed.
*/
window.echo=function(a,b){"use strict";var c=function(a){this.elem=a},d=[],e=function(c){var d=c.getBoundingClientRect();return(d.top>=0&&d.left>=0&&d.top)<=(a.innerHeight||b.documentElement.clientHeight)},f=function(a,b){a.src=a.getAttribute("data-echo"),b&&b()},g=function(a,b){-1!==d.indexOf(a)&&d.splice(b,1)},h=function(){for(var a=0;a<d.length;a++){var b=d[a];e(b)&&f(b,g(b,a))}};c.prototype={init:function(){d.push(this.elem)}};for(var i=b.querySelectorAll("img[data-echo]"),j=0;j<i.length;j++)new c(i[j]).init();b.addEventListener?b.addEventListener("DOMContentLoaded",h,!1):a.onload=h,a.onscroll=h}(window,document);
window.Echo=function(a,b){"use strict";var c,d=function(c){var d=c.getBoundingClientRect();return(d.top>=0&&d.left>=0&&d.top)<=(a.innerHeight||b.documentElement.clientHeight)},e=function(){for(var a=0;a<c.length;a++){var b=c[a];d(b)&&(b.src=b.getAttribute("data-echo"),-1!==c.indexOf(b)&&c.splice(a,1))}},f=function(){c=[].slice.call(b.querySelectorAll("[data-echo]")),e(),a.onscroll=e};return{init:f}}(window,document);

37
package.json
Unescape View File

@ -1,22 +1,35 @@
{
"name": "Echo",
"title": "Echo",
"description": "Raw JavaScript lazy-loading images with HTML5 data-* attributes.",
"author": [
{ "name" : "Todd Motto" },
{ "url" : "http://toddmotto.com" }
],
"version": "1.2.0",
"homepage": "https://github.com/toddmotto/echo",
"licenses": [
{ "type": "MIT" }
],
"author": "Todd Motto",
"year" : "2013",
"version": "1.1.0",
"description": "Lazy-loading images with data-* attributes",
"author": {
"name": "Todd Motto",
"email": "todd@toddmotto.com",
"url": "http://toddmotto.com",
"github" : "https://github.com/toddmotto"
},
"licenses": [{
"type": "MIT"
}],
"repository": {
"type": "git",
"url": "http://github.com/toddmotto/echo.git"
},
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.7.1",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-uglify": "~0.2.0",
"grunt-contrib-jshint": "~0.4.3",
"grunt-contrib-uglify": "~0.2.7",
"grunt-contrib-connect": "~0.3.0",
"grunt-contrib-watch": "~0.4.4",
"connect-livereload": "~0.2.0",
"grunt-open": "~0.2.0",
"matchdep": "~0.1.2"
},
"peerDependencies": {
"grunt-cli": "*"
}
}

85
src/echo.js
Unescape View File

@ -1,83 +1,34 @@
window.echo = (function (window, document, undefined) {
window.Echo = (function (window, document, undefined) {
'use strict';
/*
* Constructor function
*/
var Echo = function (elem) {
this.elem = elem;
};
/*
* Images for echoing
*/
var echoStore = [];
var store;
/*
* Element in viewport logic
*/
var scrolledIntoView = function (element) {
var coords = element.getBoundingClientRect();
var _inView = function (img) {
var coords = img.getBoundingClientRect();
return ((coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight));
};
/*
* Changing src attr logic
*/
var echoSrc = function (img, callback) {
img.src = img.getAttribute('data-echo');
if (callback) {
callback();
}
};
/*
* Remove loaded item from array
*/
var removeEcho = function (element, index) {
if (echoStore.indexOf(element) !== -1) {
echoStore.splice(index, 1);
var _pollImages = function () {
for (var i = 0; i < store.length; i++) {
var self = store[i];
if (_inView(self)) {
self.src = self.getAttribute('data-echo');
if (store.indexOf(self) !== -1) {
store.splice(i, 1);
}
};
/*
* Echo the images and callbacks
*/
var echoImages = function () {
for (var i = 0; i < echoStore.length; i++) {
var self = echoStore[i];
if (scrolledIntoView(self)) {
echoSrc(self, removeEcho(self, i));
}
}
};
/*
* Prototypal setup
*/
Echo.prototype = {
init : function () {
echoStore.push(this.elem);
}
var init = function () {
store = [].slice.call(document.querySelectorAll('[data-echo]'));
_pollImages();
window.onscroll = _pollImages;
};
/*
* Initiate the plugin
*/
var lazyImgs = document.querySelectorAll('img[data-echo]');
for (var i = 0; i < lazyImgs.length; i++) {
new Echo(lazyImgs[i]).init();
}
/*
* Bind the events
*/
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', echoImages, false);
} else {
window.onload = echoImages;
}
window.onscroll = echoImages;
return {
init: init
};
})(window, document);

Write Preview
Loading…
Cancel
Save