mirror of https://github.com/toddmotto/echo.git
Alberto Núñez
10 years ago
13 changed files with 210 additions and 439 deletions
@ -1,17 +1,2 @@ |
|||||||
# Node |
dist/ |
||||||
node_modules |
node_modules/ |
||||||
|
|
||||||
## OS X |
|
||||||
.DS_Store |
|
||||||
.AppleDouble |
|
||||||
.LSOverride |
|
||||||
Icon |
|
||||||
._* |
|
||||||
.Spotlight-V100 |
|
||||||
.Trashes |
|
||||||
|
|
||||||
## Windows |
|
||||||
Thumbs.db |
|
||||||
ehthumbs.db |
|
||||||
Desktop.ini |
|
||||||
$RECYCLE.BIN/ |
|
||||||
|
|||||||
@ -1,7 +0,0 @@ |
|||||||
language: node_js |
|
||||||
node_js: |
|
||||||
- "0.10" |
|
||||||
- "0.11" |
|
||||||
before_script: |
|
||||||
- npm install -g gulp |
|
||||||
script: gulp |
|
||||||
@ -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
|
||||||
|
|
||||||
@ -1,135 +0,0 @@ |
|||||||
/*! echo.js v1.7.0 | (c) 2015 @toddmotto | https://github.com/toddmotto/echo */ |
|
||||||
(function (root, factory) { |
|
||||||
if (typeof define === 'function' && define.amd) { |
|
||||||
define(function() { |
|
||||||
return factory(root); |
|
||||||
}); |
|
||||||
} else if (typeof exports === 'object') { |
|
||||||
module.exports = factory; |
|
||||||
} else { |
|
||||||
root.echo = factory(root); |
|
||||||
} |
|
||||||
})(this, function (root) { |
|
||||||
|
|
||||||
'use strict'; |
|
||||||
|
|
||||||
var echo = {}; |
|
||||||
|
|
||||||
var callback = function () {}; |
|
||||||
|
|
||||||
var offset, poll, delay, useDebounce, unload; |
|
||||||
|
|
||||||
var isHidden = function (element) { |
|
||||||
return (element.offsetParent === null); |
|
||||||
}; |
|
||||||
|
|
||||||
var inView = function (element, view) { |
|
||||||
if (isHidden(element)) { |
|
||||||
return false; |
|
||||||
} |
|
||||||
|
|
||||||
var box = element.getBoundingClientRect(); |
|
||||||
return (box.right >= view.l && box.bottom >= view.t && box.left <= view.r && box.top <= view.b); |
|
||||||
}; |
|
||||||
|
|
||||||
var debounceOrThrottle = function () { |
|
||||||
if(!useDebounce && !!poll) { |
|
||||||
return; |
|
||||||
} |
|
||||||
clearTimeout(poll); |
|
||||||
poll = setTimeout(function(){ |
|
||||||
echo.render(); |
|
||||||
poll = null; |
|
||||||
}, delay); |
|
||||||
}; |
|
||||||
|
|
||||||
echo.init = function (opts) { |
|
||||||
opts = opts || {}; |
|
||||||
var offsetAll = opts.offset || 0; |
|
||||||
var offsetVertical = opts.offsetVertical || offsetAll; |
|
||||||
var offsetHorizontal = opts.offsetHorizontal || offsetAll; |
|
||||||
var optionToInt = function (opt, fallback) { |
|
||||||
return parseInt(opt || fallback, 10); |
|
||||||
}; |
|
||||||
offset = { |
|
||||||
t: optionToInt(opts.offsetTop, offsetVertical), |
|
||||||
b: optionToInt(opts.offsetBottom, offsetVertical), |
|
||||||
l: optionToInt(opts.offsetLeft, offsetHorizontal), |
|
||||||
r: optionToInt(opts.offsetRight, offsetHorizontal) |
|
||||||
}; |
|
||||||
delay = optionToInt(opts.throttle, 250); |
|
||||||
useDebounce = opts.debounce !== false; |
|
||||||
unload = !!opts.unload; |
|
||||||
callback = opts.callback || callback; |
|
||||||
echo.render(); |
|
||||||
if (document.addEventListener) { |
|
||||||
root.addEventListener('scroll', debounceOrThrottle, false); |
|
||||||
root.addEventListener('load', debounceOrThrottle, false); |
|
||||||
} else { |
|
||||||
root.attachEvent('onscroll', debounceOrThrottle); |
|
||||||
root.attachEvent('onload', debounceOrThrottle); |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
echo.render = function () { |
|
||||||
var nodes = document.querySelectorAll('img[data-echo], [data-echo-background]'); |
|
||||||
var length = nodes.length; |
|
||||||
var src, elem; |
|
||||||
var view = { |
|
||||||
l: 0 - offset.l, |
|
||||||
t: 0 - offset.t, |
|
||||||
b: (root.innerHeight || document.documentElement.clientHeight) + offset.b, |
|
||||||
r: (root.innerWidth || document.documentElement.clientWidth) + offset.r |
|
||||||
}; |
|
||||||
for (var i = 0; i < length; i++) { |
|
||||||
elem = nodes[i]; |
|
||||||
if (inView(elem, view)) { |
|
||||||
|
|
||||||
if (unload) { |
|
||||||
elem.setAttribute('data-echo-placeholder', elem.src); |
|
||||||
} |
|
||||||
|
|
||||||
if (elem.getAttribute('data-echo-background') !== null) { |
|
||||||
elem.style.backgroundImage = "url(" + elem.getAttribute('data-echo-background') + ")"; |
|
||||||
} |
|
||||||
else { |
|
||||||
elem.src = elem.getAttribute('data-echo'); |
|
||||||
} |
|
||||||
|
|
||||||
if (!unload) { |
|
||||||
elem.removeAttribute('data-echo'); |
|
||||||
elem.removeAttribute('data-echo-background'); |
|
||||||
} |
|
||||||
|
|
||||||
callback(elem, 'load'); |
|
||||||
} |
|
||||||
else if (unload && !!(src = elem.getAttribute('data-echo-placeholder'))) { |
|
||||||
|
|
||||||
if (elem.getAttribute('data-echo-background') !== null) { |
|
||||||
elem.style.backgroundImage = "url(" + src + ")"; |
|
||||||
} |
|
||||||
else { |
|
||||||
elem.src = src; |
|
||||||
} |
|
||||||
|
|
||||||
elem.removeAttribute('data-echo-placeholder'); |
|
||||||
callback(elem, 'unload'); |
|
||||||
} |
|
||||||
} |
|
||||||
if (!length) { |
|
||||||
echo.detach(); |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
echo.detach = function () { |
|
||||||
if (document.removeEventListener) { |
|
||||||
root.removeEventListener('scroll', debounceOrThrottle); |
|
||||||
} else { |
|
||||||
root.detachEvent('onscroll', debounceOrThrottle); |
|
||||||
} |
|
||||||
clearTimeout(poll); |
|
||||||
}; |
|
||||||
|
|
||||||
return echo; |
|
||||||
|
|
||||||
}); |
|
||||||
@ -1,2 +0,0 @@ |
|||||||
/*! echo.js v1.7.0 | (c) 2015 @toddmotto | https://github.com/toddmotto/echo */ |
|
||||||
!function(t,e){"function"==typeof define&&define.amd?define(function(){return e(t)}):"object"==typeof exports?module.exports=e:t.echo=e(t)}(this,function(t){"use strict";var e,n,o,r,c,a={},u=function(){},d=function(t){return null===t.offsetParent},i=function(t,e){if(d(t))return!1;var n=t.getBoundingClientRect();return n.right>=e.l&&n.bottom>=e.t&&n.left<=e.r&&n.top<=e.b},l=function(){(r||!n)&&(clearTimeout(n),n=setTimeout(function(){a.render(),n=null},o))};return a.init=function(n){n=n||{};var d=n.offset||0,i=n.offsetVertical||d,f=n.offsetHorizontal||d,s=function(t,e){return parseInt(t||e,10)};e={t:s(n.offsetTop,i),b:s(n.offsetBottom,i),l:s(n.offsetLeft,f),r:s(n.offsetRight,f)},o=s(n.throttle,250),r=n.debounce!==!1,c=!!n.unload,u=n.callback||u,a.render(),document.addEventListener?(t.addEventListener("scroll",l,!1),t.addEventListener("load",l,!1)):(t.attachEvent("onscroll",l),t.attachEvent("onload",l))},a.render=function(){for(var n,o,r=document.querySelectorAll("img[data-echo], [data-echo-background]"),d=r.length,l={l:0-e.l,t:0-e.t,b:(t.innerHeight||document.documentElement.clientHeight)+e.b,r:(t.innerWidth||document.documentElement.clientWidth)+e.r},f=0;d>f;f++)o=r[f],i(o,l)?(c&&o.setAttribute("data-echo-placeholder",o.src),null!==o.getAttribute("data-echo-background")?o.style.backgroundImage="url("+o.getAttribute("data-echo-background")+")":o.src=o.getAttribute("data-echo"),c||(o.removeAttribute("data-echo"),o.removeAttribute("data-echo-background")),u(o,"load")):c&&(n=o.getAttribute("data-echo-placeholder"))&&(null!==o.getAttribute("data-echo-background")?o.style.backgroundImage="url("+n+")":o.src=n,o.removeAttribute("data-echo-placeholder"),u(o,"unload"));d||a.detach()},a.detach=function(){document.removeEventListener?t.removeEventListener("scroll",l):t.detachEvent("onscroll",l),clearTimeout(n)},a}); |
|
||||||
@ -1,68 +0,0 @@ |
|||||||
var gulp = require('gulp'), |
|
||||||
karma = require('gulp-karma'), |
|
||||||
jshint = require('gulp-jshint'), |
|
||||||
stylish = require('jshint-stylish'), |
|
||||||
header = require('gulp-header'), |
|
||||||
uglify = require('gulp-uglify'), |
|
||||||
plumber = require('gulp-plumber'), |
|
||||||
clean = require('gulp-clean'), |
|
||||||
rename = require('gulp-rename'), |
|
||||||
package = require('./package.json'); |
|
||||||
|
|
||||||
var paths = { |
|
||||||
output : 'dist/', |
|
||||||
scripts : [ |
|
||||||
'src/echo.js' |
|
||||||
], |
|
||||||
test: [ |
|
||||||
'test/spec/**/*.js' |
|
||||||
] |
|
||||||
}; |
|
||||||
|
|
||||||
var banner = [ |
|
||||||
'/*! ', |
|
||||||
'<%= package.name %> ', |
|
||||||
'v<%= package.version %> | ', |
|
||||||
'(c) ' + new Date().getFullYear() + ' <%= package.author %> |', |
|
||||||
' <%= package.homepage %>', |
|
||||||
' */', |
|
||||||
'\n' |
|
||||||
].join(''); |
|
||||||
|
|
||||||
gulp.task('scripts', ['clean'], function() { |
|
||||||
return gulp.src(paths.scripts) |
|
||||||
.pipe(plumber()) |
|
||||||
.pipe(header(banner, { package : package })) |
|
||||||
.pipe(gulp.dest('dist/')) |
|
||||||
.pipe(rename({ suffix: '.min' })) |
|
||||||
.pipe(uglify()) |
|
||||||
.pipe(header(banner, { package : package })) |
|
||||||
.pipe(gulp.dest('dist/')); |
|
||||||
}); |
|
||||||
|
|
||||||
gulp.task('lint', function () { |
|
||||||
return gulp.src(paths.scripts) |
|
||||||
.pipe(plumber()) |
|
||||||
.pipe(jshint()) |
|
||||||
.pipe(jshint.reporter('jshint-stylish')); |
|
||||||
}); |
|
||||||
|
|
||||||
gulp.task('clean', function () { |
|
||||||
return gulp.src(paths.output, { read: false }) |
|
||||||
.pipe(plumber()) |
|
||||||
.pipe(clean()); |
|
||||||
}); |
|
||||||
|
|
||||||
gulp.task('test', function() { |
|
||||||
return gulp.src(paths.scripts.concat(paths.test)) |
|
||||||
.pipe(plumber()) |
|
||||||
.pipe(karma({ configFile: 'test/karma.conf.js' })) |
|
||||||
.on('error', function(err) { throw err; }); |
|
||||||
}); |
|
||||||
|
|
||||||
gulp.task('default', [ |
|
||||||
'lint', |
|
||||||
'clean', |
|
||||||
'scripts', |
|
||||||
'test' |
|
||||||
]); |
|
||||||
@ -1,26 +1,13 @@ |
|||||||
{ |
{ |
||||||
"name": "echo.js", |
"name": "sloth", |
||||||
"version": "1.7.0", |
"version": "0.0.0", |
||||||
"description": "Lazy-loading with data-* attributes, offset and throttle options", |
"description": "Lazy-loading with data-* attributes, offset and throttle options", |
||||||
"author": "@toddmotto", |
"author": "anunez", |
||||||
"license": "MIT", |
"license": "MIT", |
||||||
"homepage": "https://github.com/toddmotto/echo", |
"homepage": "https://github.com/anunez/sloth", |
||||||
"devDependencies": { |
"devDependencies": { |
||||||
"gulp": "~3.7.0", |
"jshint": "^2.6.3", |
||||||
"gulp-uglify": "~0.3.0", |
"jshint-stylish": "^1.0.1", |
||||||
"gulp-rename": "~1.1.0", |
"uglify-js": "^2.4.19" |
||||||
"gulp-clean": "^0.2.4", |
|
||||||
"gulp-plumber": "~0.6.2", |
|
||||||
"gulp-header": "^1.0.2", |
|
||||||
"gulp-jshint": "^1.6.1", |
|
||||||
"jshint-stylish": "^0.2.0", |
|
||||||
"gulp-karma": "0.0.4", |
|
||||||
"karma": "^0.12.16", |
|
||||||
"karma-jasmine": "~0.2.0", |
|
||||||
"karma-phantomjs-launcher": "^0.1.4", |
|
||||||
"karma-spec-reporter": "0.0.13" |
|
||||||
}, |
|
||||||
"spm": { |
|
||||||
"main": "src/echo.js" |
|
||||||
} |
} |
||||||
} |
} |
||||||
|
|||||||
@ -1,134 +0,0 @@ |
|||||||
(function (root, factory) { |
|
||||||
if (typeof define === 'function' && define.amd) { |
|
||||||
define(function() { |
|
||||||
return factory(root); |
|
||||||
}); |
|
||||||
} else if (typeof exports === 'object') { |
|
||||||
module.exports = factory; |
|
||||||
} else { |
|
||||||
root.echo = factory(root); |
|
||||||
} |
|
||||||
})(this, function (root) { |
|
||||||
|
|
||||||
'use strict'; |
|
||||||
|
|
||||||
var echo = {}; |
|
||||||
|
|
||||||
var callback = function () {}; |
|
||||||
|
|
||||||
var offset, poll, delay, useDebounce, unload; |
|
||||||
|
|
||||||
var isHidden = function (element) { |
|
||||||
return (element.offsetParent === null); |
|
||||||
}; |
|
||||||
|
|
||||||
var inView = function (element, view) { |
|
||||||
if (isHidden(element)) { |
|
||||||
return false; |
|
||||||
} |
|
||||||
|
|
||||||
var box = element.getBoundingClientRect(); |
|
||||||
return (box.right >= view.l && box.bottom >= view.t && box.left <= view.r && box.top <= view.b); |
|
||||||
}; |
|
||||||
|
|
||||||
var debounceOrThrottle = function () { |
|
||||||
if(!useDebounce && !!poll) { |
|
||||||
return; |
|
||||||
} |
|
||||||
clearTimeout(poll); |
|
||||||
poll = setTimeout(function(){ |
|
||||||
echo.render(); |
|
||||||
poll = null; |
|
||||||
}, delay); |
|
||||||
}; |
|
||||||
|
|
||||||
echo.init = function (opts) { |
|
||||||
opts = opts || {}; |
|
||||||
var offsetAll = opts.offset || 0; |
|
||||||
var offsetVertical = opts.offsetVertical || offsetAll; |
|
||||||
var offsetHorizontal = opts.offsetHorizontal || offsetAll; |
|
||||||
var optionToInt = function (opt, fallback) { |
|
||||||
return parseInt(opt || fallback, 10); |
|
||||||
}; |
|
||||||
offset = { |
|
||||||
t: optionToInt(opts.offsetTop, offsetVertical), |
|
||||||
b: optionToInt(opts.offsetBottom, offsetVertical), |
|
||||||
l: optionToInt(opts.offsetLeft, offsetHorizontal), |
|
||||||
r: optionToInt(opts.offsetRight, offsetHorizontal) |
|
||||||
}; |
|
||||||
delay = optionToInt(opts.throttle, 250); |
|
||||||
useDebounce = opts.debounce !== false; |
|
||||||
unload = !!opts.unload; |
|
||||||
callback = opts.callback || callback; |
|
||||||
echo.render(); |
|
||||||
if (document.addEventListener) { |
|
||||||
root.addEventListener('scroll', debounceOrThrottle, false); |
|
||||||
root.addEventListener('load', debounceOrThrottle, false); |
|
||||||
} else { |
|
||||||
root.attachEvent('onscroll', debounceOrThrottle); |
|
||||||
root.attachEvent('onload', debounceOrThrottle); |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
echo.render = function () { |
|
||||||
var nodes = document.querySelectorAll('img[data-echo], [data-echo-background]'); |
|
||||||
var length = nodes.length; |
|
||||||
var src, elem; |
|
||||||
var view = { |
|
||||||
l: 0 - offset.l, |
|
||||||
t: 0 - offset.t, |
|
||||||
b: (root.innerHeight || document.documentElement.clientHeight) + offset.b, |
|
||||||
r: (root.innerWidth || document.documentElement.clientWidth) + offset.r |
|
||||||
}; |
|
||||||
for (var i = 0; i < length; i++) { |
|
||||||
elem = nodes[i]; |
|
||||||
if (inView(elem, view)) { |
|
||||||
|
|
||||||
if (unload) { |
|
||||||
elem.setAttribute('data-echo-placeholder', elem.src); |
|
||||||
} |
|
||||||
|
|
||||||
if (elem.getAttribute('data-echo-background') !== null) { |
|
||||||
elem.style.backgroundImage = "url(" + elem.getAttribute('data-echo-background') + ")"; |
|
||||||
} |
|
||||||
else { |
|
||||||
elem.src = elem.getAttribute('data-echo'); |
|
||||||
} |
|
||||||
|
|
||||||
if (!unload) { |
|
||||||
elem.removeAttribute('data-echo'); |
|
||||||
elem.removeAttribute('data-echo-background'); |
|
||||||
} |
|
||||||
|
|
||||||
callback(elem, 'load'); |
|
||||||
} |
|
||||||
else if (unload && !!(src = elem.getAttribute('data-echo-placeholder'))) { |
|
||||||
|
|
||||||
if (elem.getAttribute('data-echo-background') !== null) { |
|
||||||
elem.style.backgroundImage = "url(" + src + ")"; |
|
||||||
} |
|
||||||
else { |
|
||||||
elem.src = src; |
|
||||||
} |
|
||||||
|
|
||||||
elem.removeAttribute('data-echo-placeholder'); |
|
||||||
callback(elem, 'unload'); |
|
||||||
} |
|
||||||
} |
|
||||||
if (!length) { |
|
||||||
echo.detach(); |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
echo.detach = function () { |
|
||||||
if (document.removeEventListener) { |
|
||||||
root.removeEventListener('scroll', debounceOrThrottle); |
|
||||||
} else { |
|
||||||
root.detachEvent('onscroll', debounceOrThrottle); |
|
||||||
} |
|
||||||
clearTimeout(poll); |
|
||||||
}; |
|
||||||
|
|
||||||
return echo; |
|
||||||
|
|
||||||
}); |
|
||||||
@ -0,0 +1,154 @@ |
|||||||
|
(function (window) { |
||||||
|
'use strict'; |
||||||
|
|
||||||
|
var DATA_SRC = 'data-src'; |
||||||
|
var DATA_SRC_BG = 'data-src-bg'; |
||||||
|
var DATA_PLACEHOLDER = 'data-sloth'; |
||||||
|
|
||||||
|
var callback; |
||||||
|
var offset; |
||||||
|
var poll; |
||||||
|
var delay; |
||||||
|
var useDebounce; |
||||||
|
var unload; |
||||||
|
|
||||||
|
var inView = function (element, view) { |
||||||
|
if (element.offsetParent === null) { |
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
var box = element.getBoundingClientRect(); |
||||||
|
return (box.right >= view.l && box.bottom >= view.t && box.left <= view.r && box.top <= view.b); |
||||||
|
}; |
||||||
|
|
||||||
|
var debounceOrThrottle = function () { |
||||||
|
if (!useDebounce && !!poll) { |
||||||
|
return; |
||||||
|
} |
||||||
|
clearTimeout(poll); |
||||||
|
poll = setTimeout(function () { |
||||||
|
render(); |
||||||
|
poll = null; |
||||||
|
}, delay); |
||||||
|
}; |
||||||
|
|
||||||
|
var addListener = function(type, listener) { |
||||||
|
if (document.addEventListener) { |
||||||
|
window.addEventListener(type, listener); |
||||||
|
} else { |
||||||
|
window.attachEvent('on' + type, listener); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
var removeListener = function(type, listener) { |
||||||
|
if (document.removeEventListener) { |
||||||
|
window.removeEventListener(type, listener); |
||||||
|
} else { |
||||||
|
window.detachEvent(type, listener); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
var render = function () { |
||||||
|
var nodes = document.querySelectorAll('img[' + DATA_SRC + '], [' + DATA_SRC_BG + ']'); |
||||||
|
var length = nodes.length; |
||||||
|
|
||||||
|
if (!length) { |
||||||
|
detach(); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
var src; |
||||||
|
var elem; |
||||||
|
var view = { |
||||||
|
l: 0 - offset.l, |
||||||
|
t: 0 - offset.t, |
||||||
|
b: (window.innerHeight || document.documentElement.clientHeight) + offset.b, |
||||||
|
r: (window.innerWidth || document.documentElement.clientWidth) + offset.r |
||||||
|
}; |
||||||
|
|
||||||
|
for (var i = 0; i < length; i++) { |
||||||
|
elem = nodes[i]; |
||||||
|
|
||||||
|
if (inView(elem, view)) { |
||||||
|
|
||||||
|
if (unload) { |
||||||
|
elem.setAttribute(DATA_PLACEHOLDER, elem.src); |
||||||
|
} |
||||||
|
|
||||||
|
if (elem.getAttribute(DATA_SRC_BG) !== null) { |
||||||
|
elem.style.backgroundImage = 'url(' + elem.getAttribute(DATA_SRC_BG) + ')'; |
||||||
|
} else { |
||||||
|
elem.src = elem.getAttribute(DATA_SRC); |
||||||
|
} |
||||||
|
|
||||||
|
if (!unload) { |
||||||
|
elem.removeAttribute(DATA_SRC); |
||||||
|
elem.removeAttribute(DATA_SRC_BG); |
||||||
|
} |
||||||
|
|
||||||
|
callback(elem, 'load'); |
||||||
|
} else if (unload && !!(src = elem.getAttribute(DATA_PLACEHOLDER))) { |
||||||
|
|
||||||
|
if (elem.getAttribute(DATA_SRC_BG) !== null) { |
||||||
|
elem.style.backgroundImage = 'url(' + src + ')'; |
||||||
|
} else { |
||||||
|
elem.src = src; |
||||||
|
} |
||||||
|
|
||||||
|
elem.removeAttribute(DATA_PLACEHOLDER); |
||||||
|
callback(elem, 'unload'); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
var detach = function () { |
||||||
|
removeListener('scroll', debounceOrThrottle); |
||||||
|
removeListener('resize', debounceOrThrottle); |
||||||
|
|
||||||
|
clearTimeout(poll); |
||||||
|
}; |
||||||
|
|
||||||
|
var optionToInt = function (opt, fallback) { |
||||||
|
return parseInt(opt || fallback, 10); |
||||||
|
}; |
||||||
|
|
||||||
|
var sloth = { |
||||||
|
init: function (opts) { |
||||||
|
opts = opts || {}; |
||||||
|
var offsetAll = opts.offset || 0; |
||||||
|
var offsetVertical = opts.offsetVertical || offsetAll; |
||||||
|
var offsetHorizontal = opts.offsetHorizontal || offsetAll; |
||||||
|
|
||||||
|
offset = { |
||||||
|
t: optionToInt(opts.offsetTop, offsetVertical), |
||||||
|
b: optionToInt(opts.offsetBottom, offsetVertical), |
||||||
|
l: optionToInt(opts.offsetLeft, offsetHorizontal), |
||||||
|
r: optionToInt(opts.offsetRight, offsetHorizontal) |
||||||
|
}; |
||||||
|
delay = optionToInt(opts.throttle, 250); |
||||||
|
useDebounce = opts.debounce !== false; |
||||||
|
unload = !!opts.unload; |
||||||
|
callback = opts.callback || function() {}; |
||||||
|
|
||||||
|
render(); |
||||||
|
|
||||||
|
addListener('scroll', debounceOrThrottle); |
||||||
|
addListener('load', debounceOrThrottle); |
||||||
|
addListener('resize', debounceOrThrottle); |
||||||
|
}, |
||||||
|
|
||||||
|
render: function() { |
||||||
|
render(); |
||||||
|
}, |
||||||
|
|
||||||
|
detach: function() { |
||||||
|
detach(); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
if (typeof exports === 'object') { |
||||||
|
module.exports = sloth; |
||||||
|
} else { |
||||||
|
window.sloth = sloth; |
||||||
|
} |
||||||
|
})(window); |
||||||
@ -1,14 +0,0 @@ |
|||||||
module.exports = function (config) { |
|
||||||
config.set({ |
|
||||||
basePath : '', |
|
||||||
autoWatch : true, |
|
||||||
frameworks: ['jasmine'], |
|
||||||
browsers : ['PhantomJS'], |
|
||||||
plugins : [ |
|
||||||
'karma-spec-reporter', |
|
||||||
'karma-phantomjs-launcher', |
|
||||||
'karma-jasmine' |
|
||||||
], |
|
||||||
reporters : ['spec'] |
|
||||||
}); |
|
||||||
}; |
|
||||||
Loading…
Reference in new issue