diff --git a/README.md b/README.md index 0db794a..3c82e54 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ Echo is a standalone JavaScript lazy-loading image micro-library. Echo is fast, bower install echojs ``` -Using Echo.js is simple, just add the image you wish to load to a `data-echo` attribute. +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. ```html diff --git a/dist/echo.js b/dist/echo.js index 7a5efed..fc92637 100644 --- a/dist/echo.js +++ b/dist/echo.js @@ -64,7 +64,7 @@ }; echo.render = function () { - var nodes = document.querySelectorAll('img[data-echo]'); + var nodes = document.querySelectorAll('img[data-echo], [data-echo-background]'); var length = nodes.length; var src, elem; var view = { @@ -76,16 +76,33 @@ for (var i = 0; i < length; i++) { elem = nodes[i]; if (inView(elem, view)) { + if (unload) { elem.setAttribute('data-echo-placeholder', elem.src); } - elem.src = elem.getAttribute('data-echo'); + + 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'); } + callback(elem, 'load'); - } else if (unload && !!(src = elem.getAttribute('data-echo-placeholder'))) { - elem.src = src; + } + 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'); } diff --git a/dist/echo.min.js b/dist/echo.min.js index d654ac5..7a2ee85 100644 --- a/dist/echo.min.js +++ b/dist/echo.min.js @@ -1,2 +1,2 @@ /*! echo.js v1.6.0 | (c) 2014 @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,i={},l=function(){},a=function(t,e){var n=t.getBoundingClientRect();return n.right>=e.l&&n.bottom>=e.t&&n.left<=e.r&&n.top<=e.b},d=function(){(r||!n)&&(clearTimeout(n),n=setTimeout(function(){i.render(),n=null},o))};return i.init=function(n){n=n||{};var a=n.offset||0,u=n.offsetVertical||a,f=n.offsetHorizontal||a,s=function(t,e){return parseInt(t||e,10)};e={t:s(n.offsetTop,u),b:s(n.offsetBottom,u),l:s(n.offsetLeft,f),r:s(n.offsetRight,f)},o=s(n.throttle,250),r=n.debounce!==!1,c=!!n.unload,l=n.callback||l,i.render(),document.addEventListener?(t.addEventListener("scroll",d,!1),t.addEventListener("load",d,!1)):(t.attachEvent("onscroll",d),t.attachEvent("onload",d))},i.render=function(){for(var n,o,r=document.querySelectorAll("img[data-echo]"),d=r.length,u={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],a(o,u)?(c&&o.setAttribute("data-echo-placeholder",o.src),o.src=o.getAttribute("data-echo"),c||o.removeAttribute("data-echo"),l(o,"load")):c&&(n=o.getAttribute("data-echo-placeholder"))&&(o.src=n,o.removeAttribute("data-echo-placeholder"),l(o,"unload"));d||i.detach()},i.detach=function(){document.removeEventListener?t.removeEventListener("scroll",d):t.detachEvent("onscroll",d),clearTimeout(n)},i}); \ No newline at end of file +!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={},d=function(){},u=function(t,e){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 u=n.offset||0,i=n.offsetVertical||u,f=n.offsetHorizontal||u,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,d=n.callback||d,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]"),l=r.length,i={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;l>f;f++)o=r[f],u(o,i)?(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"),d(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"),d(o,"unload"));l||a.detach()},a.detach=function(){document.removeEventListener?t.removeEventListener("scroll",l):t.detachEvent("onscroll",l),clearTimeout(n)},a}); \ No newline at end of file diff --git a/src/echo.js b/src/echo.js index 5b14b29..74ba0c5 100644 --- a/src/echo.js +++ b/src/echo.js @@ -63,7 +63,7 @@ }; echo.render = function () { - var nodes = document.querySelectorAll('img[data-echo]'); + var nodes = document.querySelectorAll('img[data-echo], [data-echo-background]'); var length = nodes.length; var src, elem; var view = { @@ -75,16 +75,33 @@ for (var i = 0; i < length; i++) { elem = nodes[i]; if (inView(elem, view)) { + if (unload) { elem.setAttribute('data-echo-placeholder', elem.src); } - elem.src = elem.getAttribute('data-echo'); + + 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'); } + callback(elem, 'load'); - } else if (unload && !!(src = elem.getAttribute('data-echo-placeholder'))) { - elem.src = src; + } + 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'); }