diff --git a/src/echo.js b/src/echo.js index da1f062..7577563 100644 --- a/src/echo.js +++ b/src/echo.js @@ -1,135 +1,134 @@ -(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; - } +(function() { + 'use strict'; - var box = element.getBoundingClientRect(); - return (box.right >= view.l && box.bottom >= view.t && box.left <= view.r && box.top <= view.b); - }; + var echo = {}; + var _global = this || (0,eval)('this'); + var root = {}; - var debounceOrThrottle = function () { - if(!useDebounce && !!poll) { - return; - } - clearTimeout(poll); - poll = setTimeout(function(){ - echo.render(); - poll = null; - }, delay); - }; - - echo.init = function (opts) { - opts = opts || {}; - root = opts.viewport || this || (0,eval)('this'); - 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) + var callback = function () { }; - 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 + + var offset, poll, delay, useDebounce, unload; + + var isHidden = function (element) { + return (element.offsetParent === null); }; - for (var i = 0; i < length; i++) { - elem = nodes[i]; - if (inView(elem, view)) { - if (unload) { - elem.setAttribute('data-echo-placeholder', elem.src); + var inView = function (element, view) { + if (isHidden(element)) { + return false; } - if (elem.getAttribute('data-echo-background') !== null) { - elem.style.backgroundImage = "url(" + elem.getAttribute('data-echo-background') + ")"; - } - else { - elem.src = elem.getAttribute('data-echo'); - } + var box = element.getBoundingClientRect(); + return (box.right >= view.l && box.bottom >= view.t && box.left <= view.r && box.top <= view.b); + }; - if (!unload) { - elem.removeAttribute('data-echo'); - elem.removeAttribute('data-echo-background'); + var debounceOrThrottle = function () { + if (!useDebounce && !!poll) { + return; } + clearTimeout(poll); + poll = setTimeout(function () { + echo.render(); + poll = null; + }, delay); + }; - callback(elem, 'load'); - } - else if (unload && !!(src = elem.getAttribute('data-echo-placeholder'))) { + echo.init = function (opts) { + opts = opts || {}; + root = opts.viewport || _global; + 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); + } + }; - if (elem.getAttribute('data-echo-background') !== null) { - elem.style.backgroundImage = "url(" + src + ")"; + 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 || root.clientHeight) + offset.b, + r: (root.innerWidth || root.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'); + } } - else { - elem.src = src; + if (!length) { + echo.detach(); } + }; - 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); + }; - echo.detach = function () { - if (document.removeEventListener) { - root.removeEventListener('scroll', debounceOrThrottle); + if ((typeof module !== "undefined" && module !== null) && module.exports) { + module.exports = echo; + } else if (typeof define === 'function') { + define(function() { + return echo; + }); } else { - root.detachEvent('onscroll', debounceOrThrottle); + root.echo = echo; } - clearTimeout(poll); - }; - - return echo; - -}); +}()); \ No newline at end of file