diff --git a/src/core.js b/src/core.js index 1c7627d9..b76c6cbb 100644 --- a/src/core.js +++ b/src/core.js @@ -249,7 +249,10 @@ imgix.helpers = { } } - found = val; + found = { + width: elem.offsetWidth, + height: elem.offsetHeight + }; for (prop in visProp) { if (visProp.hasOwnProperty(prop)) { @@ -2033,6 +2036,16 @@ imgix.FluidSet = function (options) { }; imgix.FluidSet.prototype.updateSrc = function (elem, pinchScale) { + // An empty src attribute throws off the 'hidden' check below, + // so we need to give it something to actually fill it up + if (elem.hasAttribute('src') && elem.getAttribute('src') === '') { + elem.setAttribute('src', imgix.getEmptyImage()); + } + + // Short-circuit if the image is hidden + if (!elem.offsetWidth && !elem.offsetHeight && !elem.getClientRects().length) { + return; + } if (this.options.lazyLoad) { var view = { @@ -2089,6 +2102,7 @@ imgix.FluidSet.prototype.updateSrc = function (elem, pinchScale) { return; } + if (!elem.fluidUpdateCount) { elem.fluidUpdateCount = 0; } diff --git a/tests/test.js b/tests/test.js index 73b3bd45..1e0084c4 100644 --- a/tests/test.js +++ b/tests/test.js @@ -829,6 +829,96 @@ describe('imgix-javascript unit tests', function() { }); }); + it('doesn\'t download images when the imgix.fluid image is hidden', function() { + var el, + src = 'http://jackangers.imgix.net/chester.png', + checkSrc = false; + + runs(function() { + el = document.createElement('img'); + el.setAttribute('data-src', src); + el.setAttribute('class', 'imgix-fluid'); + el.style.display = 'none'; + + document.body.appendChild(el); + + imgix.fluid(el); + + // Wait 5 seconds, then check if image has a src + setTimeout(function() { + checkSrc = !el.hasAttribute('src'); + }, 5000); + }); + + waitsFor(function() { + return checkSrc; + }, 'The image src should not be set', 5500); + + runs(function() { + expect(el.hasAttribute('src')).toEqual(false); + document.body.removeChild(el); + }); + }); + + it('doesn\'t download images when the imgix.fluid image\'s container is hidden', function() { + var child, + parent, + src = 'http://jackangers.imgix.net/chester.png', + checkSrc = false; + + runs(function() { + child = document.createElement('img'); + child.setAttribute('data-src', src); + child.setAttribute('class', 'imgix-fluid-test'); + + parent = document.createElement('div'); + parent.style.display = 'none'; + parent.appendChild(child); + + document.body.appendChild(parent); + + imgix.fluid(parent, {fluidClass: "imgix-fluid-test"}); + + // Wait 5 seconds, then check if image has a src + setTimeout(function() { + checkSrc = !child.hasAttribute('src'); + }, 5000); + }); + + waitsFor(function() { + return checkSrc; + }, 'The image src should not be set', 5500); + + runs(function() { + expect(child.hasAttribute('src')).toEqual(false); + document.body.removeChild(parent); + }); + }); + + it('handles imgix.fluid images with an empty src attribute', function() { + var el, + src = 'http://jackangers.imgix.net/chester.png'; + + runs(function() { + el = document.createElement('img'); + el.setAttribute('data-src', src); + el.setAttribute('class', 'imgix-fluid'); + + document.body.appendChild(el); + + imgix.fluid(el); + }); + + waitsFor(function() { + return el.src !== ''; + }, 'The image src should be set', 5500); + + runs(function() { + expect(el.src).toMatch(/chester\.png\?/); + document.body.removeChild(el); + }); + }); + it('handles imgix.fluid images with maximum dimensions', function() { var pixelStep = 10,