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

Merge pull request #67 from jonathan-fielding/master 

added background image support
pull/71/head
Jonathan Fielding 10 years ago
parent
80b6aa6c3a 77635e29b0
commit
5642ec553b
4 changed files with 44 additions and 10 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      README.md
  2. 25
      dist/echo.js
  3. 2
      dist/echo.min.js
  4. 25
      src/echo.js

2
README.md
Unescape View File

@ -6,7 +6,7 @@ Echo is a standalone JavaScript lazy-loading image micro-library. Echo is fast,
bower install echojs 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 ```html
<body> <body>

25
dist/echo.js vendored
Unescape View File

@ -64,7 +64,7 @@
}; };
echo.render = function () { 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 length = nodes.length;
var src, elem; var src, elem;
var view = { var view = {
@ -76,16 +76,33 @@
for (var i = 0; i < length; i++) { for (var i = 0; i < length; i++) {
elem = nodes[i]; elem = nodes[i];
if (inView(elem, view)) { if (inView(elem, view)) {
if (unload) { if (unload) {
elem.setAttribute('data-echo-placeholder', elem.src); 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) { if (!unload) {
elem.removeAttribute('data-echo'); elem.removeAttribute('data-echo');
} }
callback(elem, 'load'); 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'); elem.removeAttribute('data-echo-placeholder');
callback(elem, 'unload'); callback(elem, 'unload');
} }

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

@ -1,2 +1,2 @@
/*! echo.js v1.6.0 | (c) 2014 @toddmotto | https://github.com/toddmotto/echo */ /*! 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}); !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});

25
src/echo.js
Unescape View File

@ -63,7 +63,7 @@
}; };
echo.render = function () { 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 length = nodes.length;
var src, elem; var src, elem;
var view = { var view = {
@ -75,16 +75,33 @@
for (var i = 0; i < length; i++) { for (var i = 0; i < length; i++) {
elem = nodes[i]; elem = nodes[i];
if (inView(elem, view)) { if (inView(elem, view)) {
if (unload) { if (unload) {
elem.setAttribute('data-echo-placeholder', elem.src); 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) { if (!unload) {
elem.removeAttribute('data-echo'); elem.removeAttribute('data-echo');
} }
callback(elem, 'load'); 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'); elem.removeAttribute('data-echo-placeholder');
callback(elem, 'unload'); callback(elem, 'unload');
} }

Write Preview
Loading…
Cancel
Save