diff --git a/.gitignore b/.gitignore index 67f9a40..1eae0cf 100644 --- a/.gitignore +++ b/.gitignore @@ -1,17 +1,2 @@ -# Node -node_modules - -## OS X -.DS_Store -.AppleDouble -.LSOverride -Icon -._* -.Spotlight-V100 -.Trashes - -## Windows -Thumbs.db -ehthumbs.db -Desktop.ini -$RECYCLE.BIN/ +dist/ +node_modules/ diff --git a/.spmignore b/.spmignore deleted file mode 100644 index ecfc81b..0000000 --- a/.spmignore +++ /dev/null @@ -1,2 +0,0 @@ -dist -test diff --git a/.travis.yml b/.travis.yml deleted file mode 100755 index b8a09e1..0000000 --- a/.travis.yml +++ /dev/null @@ -1,7 +0,0 @@ -language: node_js -node_js: - - "0.10" - - "0.11" -before_script: - - npm install -g gulp -script: gulp diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..c70598c --- /dev/null +++ b/Makefile @@ -0,0 +1,26 @@ +define colorecho + @tput setaf 6 + @echo "\n### $1 ###\n" + @tput sgr0 +endef + +all: js + +clean: + $(call colorecho, "Cleaning ignored files") + cat .gitignore | xargs rm -rf + +npm: + $(call colorecho, "Installing npm dependencies") + npm install + +lint: npm + $(call colorecho, "Linting JavaScript") + node_modules/.bin/jshint src/sloth.js -c .jshintrc --reporter node_modules/jshint-stylish/stylish.js + +js: lint + $(call colorecho, "Minifying JavaScript") + mkdir -p dist + node_modules/.bin/uglifyjs src/sloth.js --compress --mangle > dist/sloth.min.js + wc -c dist/sloth.min.js + diff --git a/README.md b/README.md index 3c82e54..54c284d 100644 --- a/README.md +++ b/README.md @@ -1,21 +1,17 @@ -# Echo.js [![Build Status](https://travis-ci.org/toddmotto/echo.svg)](https://travis-ci.org/toddmotto/echo) +# Sloth -Echo is a standalone JavaScript lazy-loading image micro-library. Echo is fast, 2KB, and uses HTML5 data-* attributes for simple. Check out a [demo](http://toddmotto.com/labs/echo). Echo works in IE8+. +Sloth is a standalone JavaScript lazy-loading image micro-library. Sloth is fast, 1.6KB (900B gzipped), and uses HTML5 data-* attributes for simple. Sloth works in IE8+. -``` -bower install echojs -``` - -Using Echo.js is simple, to add an image directly into the page simply add a `data-echo` attribute to the img tag. Alternatively if you want to use Echo to lazy load background images simply add a `data-echo-background' attribute to the element with the image URL. +Using Sloth is simple, to add an image directly into the page simply add a `data-src` attribute to the img tag. Alternatively if you want to use Sloth to lazy load background images simply add a `data-src-bg` attribute to the element with the image URL. ```html
- + - + ``` @@ -36,37 +32,37 @@ The `init()` API takes a few options #### offset Type: `Number|String` Default: `0` -The `offset` option allows you to specify how far below, above, to the left, and to the right of the viewport you want Echo to _begin_ loading your images. If you specify `0`, Echo will load your image as soon as it is visible in the viewport, if you want to load _1000px_ below or above the viewport, use `1000`. +The `offset` option allows you to specify how far below, above, to the left, and to the right of the viewport you want Sloth to _begin_ loading your images. If you specify `0`, Sloth will load your image as soon as it is visible in the viewport, if you want to load _1000px_ below or above the viewport, use `1000`. #### offsetVertical Type: `Number|String` Default: `offset`'s value -The `offsetVertical` option allows you to specify how far above and below the viewport you want Echo to _begin_ loading your images. +The `offsetVertical` option allows you to specify how far above and below the viewport you want Sloth to _begin_ loading your images. #### offsetHorizontal Type: `Number|String` Default: `offset`'s value -The `offsetHorizontal` option allows you to specify how far to the left and right of the viewport you want Echo to _begin_ loading your images. +The `offsetHorizontal` option allows you to specify how far to the left and right of the viewport you want Sloth to _begin_ loading your images. #### offsetTop Type: `Number|String` Default: `offsetVertical`'s value -The `offsetTop` option allows you to specify how far above the viewport you want Echo to _begin_ loading your images. +The `offsetTop` option allows you to specify how far above the viewport you want Sloth to _begin_ loading your images. #### offsetBottom Type: `Number|String` Default: `offsetVertical`'s value -The `offsetBottom` option allows you to specify how far below the viewport you want Echo to _begin_ loading your images. +The `offsetBottom` option allows you to specify how far below the viewport you want Sloth to _begin_ loading your images. #### offsetLeft Type: `Number|String` Default: `offsetVertical`'s value -The `offsetLeft` option allows you to specify how far to left of the viewport you want Echo to _begin_ loading your images. +The `offsetLeft` option allows you to specify how far to left of the viewport you want Sloth to _begin_ loading your images. #### offsetRight Type: `Number|String` Default: `offsetVertical`'s value -The `offsetRight` option allows you to specify how far to the right of the viewport you want Echo to _begin_ loading your images. +The `offsetRight` option allows you to specify how far to the right of the viewport you want Sloth to _begin_ loading your images. #### throttle Type: `Number|String` Default: `250` @@ -81,7 +77,7 @@ By default the throttling function is actually a [debounce](http://underscorejs. #### unload Type: `Boolean` Default: `false` -This option will tell echo to unload loaded images once they have scrolled beyond the viewport (including the offset area). +This option will tell Sloth to unload loaded images once they have scrolled beyond the viewport (including the offset area). #### callback Type: `Function` @@ -89,7 +85,7 @@ Type: `Function` The callback will be passed the element that has been updated and what the update operation was (ie `load` or `unload`). This can be useful if you want to add a class like `loaded` to the element. Or do some logging. ```js -echo.init({ +sloth.init({ callback: function(element, op) { if(op === 'load') { element.classList.add('loaded'); @@ -102,10 +98,10 @@ echo.init({ ## .render() -Echo's callback `render()` can be used to make Echo poll your images when you're not scrolling, for instance if you've got a filter layout that swaps images but does not scroll, you need to call the internal functions without scrolling. Use `render()` for this: +Sloth's callback `render()` can be used to make Sloth poll your images when you're not scrolling, for instance if you've got a filter layout that swaps images but does not scroll, you need to call the internal functions without scrolling. Use `render()` for this: ```js -echo.render(); +sloth.render(); ``` Using `render()` is also throttled, which means you can bind it to an `onresize` event and it will be optimised for performance in the same way `onscroll` is. @@ -113,15 +109,9 @@ Using `render()` is also throttled, which means you can bind it to an `onresize` ## Manual installation Drop your files into your required folders, make sure you're using the file(s) from the `dist` folder, which is the compiled production-ready code. Ensure you place the script before the closing `