From a34d60c5a15c5171b69e24fc70a8fe9e5e89ef22 Mon Sep 17 00:00:00 2001 From: Andrew Shu Date: Fri, 19 Aug 2016 12:07:31 -0700 Subject: [PATCH] feat: Avoid setting elem.src if unchanged (#113) * Avoid setting elem.src if unchanged Helps with non-img elements on Firefox. Prevents reloading on scroll. * lint: single-quoted strings * dist: update with latest source --- dist/echo.js | 12 ++++++------ dist/echo.min.js | 2 +- src/echo.js | 8 ++++---- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/dist/echo.js b/dist/echo.js index f9fc98e..eec0c4f 100644 --- a/dist/echo.js +++ b/dist/echo.js @@ -71,8 +71,8 @@ } }; - echo.render = function () { - var nodes = document.querySelectorAll('img[data-echo], [data-echo-background]'); + echo.render = function (context) { + var nodes = (context || document).querySelectorAll('[data-echo], [data-echo-background]'); var length = nodes.length; var src, elem; var view = { @@ -90,10 +90,10 @@ } if (elem.getAttribute('data-echo-background') !== null) { - elem.style.backgroundImage = "url(" + elem.getAttribute('data-echo-background') + ")"; + elem.style.backgroundImage = 'url(' + elem.getAttribute('data-echo-background') + ')'; } - else { - elem.src = elem.getAttribute('data-echo'); + else if (elem.src !== (src = elem.getAttribute('data-echo'))) { + elem.src = src; } if (!unload) { @@ -106,7 +106,7 @@ else if (unload && !!(src = elem.getAttribute('data-echo-placeholder'))) { if (elem.getAttribute('data-echo-background') !== null) { - elem.style.backgroundImage = "url(" + src + ")"; + elem.style.backgroundImage = 'url(' + src + ')'; } else { elem.src = src; diff --git a/dist/echo.min.js b/dist/echo.min.js index 3a988c7..76a3ef5 100644 --- a/dist/echo.min.js +++ b/dist/echo.min.js @@ -1,2 +1,2 @@ /*! echo-js v1.7.3 | (c) 2016 @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}); \ 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={},u=function(){},d=function(t){return null===t.offsetParent},l=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},i=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,l=n.offsetVertical||d,f=n.offsetHorizontal||d,s=function(t,e){return parseInt(t||e,10)};e={t:s(n.offsetTop,l),b:s(n.offsetBottom,l),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",i,!1),t.addEventListener("load",i,!1)):(t.attachEvent("onscroll",i),t.attachEvent("onload",i))},a.render=function(n){for(var o,r,d=(n||document).querySelectorAll("[data-echo], [data-echo-background]"),i=d.length,f={l:0-e.l,t:0-e.t,b:(t.innerHeight||document.documentElement.clientHeight)+e.b,r:(t.innerWidth||document.documentElement.clientWidth)+e.r},s=0;i>s;s++)r=d[s],l(r,f)?(c&&r.setAttribute("data-echo-placeholder",r.src),null!==r.getAttribute("data-echo-background")?r.style.backgroundImage="url("+r.getAttribute("data-echo-background")+")":r.src!==(o=r.getAttribute("data-echo"))&&(r.src=o),c||(r.removeAttribute("data-echo"),r.removeAttribute("data-echo-background")),u(r,"load")):c&&(o=r.getAttribute("data-echo-placeholder"))&&(null!==r.getAttribute("data-echo-background")?r.style.backgroundImage="url("+o+")":r.src=o,r.removeAttribute("data-echo-placeholder"),u(r,"unload"));i||a.detach()},a.detach=function(){document.removeEventListener?t.removeEventListener("scroll",i):t.detachEvent("onscroll",i),clearTimeout(n)},a}); \ No newline at end of file diff --git a/src/echo.js b/src/echo.js index bbd378e..0755415 100644 --- a/src/echo.js +++ b/src/echo.js @@ -89,10 +89,10 @@ } if (elem.getAttribute('data-echo-background') !== null) { - elem.style.backgroundImage = "url(" + elem.getAttribute('data-echo-background') + ")"; + elem.style.backgroundImage = 'url(' + elem.getAttribute('data-echo-background') + ')'; } - else { - elem.src = elem.getAttribute('data-echo'); + else if (elem.src !== (src = elem.getAttribute('data-echo'))) { + elem.src = src; } if (!unload) { @@ -105,7 +105,7 @@ else if (unload && !!(src = elem.getAttribute('data-echo-placeholder'))) { if (elem.getAttribute('data-echo-background') !== null) { - elem.style.backgroundImage = "url(" + src + ")"; + elem.style.backgroundImage = 'url(' + src + ')'; } else { elem.src = src;