From d2bddd94a5ef7dc2078aee18b9c5011773630aa0 Mon Sep 17 00:00:00 2001 From: nabrown <nabrown78@gmail.com> Date: Sat, 4 Mar 2017 13:25:24 -0500 Subject: [PATCH] Lazy load background images on non-<img> elements Per this PR: https://github.com/luis-almeida/unveil/pull/128 --- jquery.unveil.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/jquery.unveil.js b/jquery.unveil.js index e2e36ec..84f0329 100644 --- a/jquery.unveil.js +++ b/jquery.unveil.js @@ -23,8 +23,10 @@ var source = this.getAttribute(attrib); source = source || this.getAttribute("data-src"); if (source) { - this.setAttribute("src", source); - if (typeof callback === "function") callback.call(this); + // if element is an image, set the src + // else, set image as background + + $(this).is('img') ? $(this).attr("src", source) : $(this).css('background-image', 'url("' + source + '")'); + if (typeof callback === "function") callback.call(this); } }); @@ -38,7 +40,7 @@ et = $el.offset().top, // distance from document top to top of element eb = et + $el.height(); // distance from top of document to bottom of element - // the bottom of the element is below the top of the browser (- threshold) + // the bottom of the element is below the top of the browser (- threshold) // && the top of the element id above the bottom of the browser (+ threshold) return eb >= wt - th && et <= wb + th; });