Add option to skip image src replacement if images are currently hidden

Imager.js

@@ -117,6 +117,7 @@
  this.scrollDelay = opts.scrollDelay || 250;
  this.onResize = opts.hasOwnProperty('onResize') ? opts.onResize : true;
  this.lazyload = opts.hasOwnProperty('lazyload') ? opts.lazyload : false;
+ this.loadHidden = opts.hasOwnProperty('loadHidden') ? opts.loadHidden : true;
  this.scrolled = false;
  this.availablePixelRatios = opts.availablePixelRatios || [1, 2];
  this.availableWidths = opts.availableWidths || defaultWidths;
@@ -308,7 +309,7 @@
  this.refreshPixelRatio();
 
  applyEach(images, function (image) {
- if (filterFn(image)) {
+ if (self.isImageEligibleForReplacing(image) && filterFn(image)) {
  self.replaceImagesBasedOnScreenDimensions(image);
  }
  });
@@ -318,6 +319,10 @@
  }
  };
 
+ Imager.prototype.isImageEligibleForReplacing = function (image) {
+ return this.loadHidden || Imager.isElementVisible(image);
+ };
+
  /**
  * Upgrades an image from an empty placeholder to a fully sourced image element
  *
@@ -457,6 +462,19 @@
  }
  };
 
+ /**
+ * Elements are considered visible if they consume space in the document.
+ * Visible elements have a width or height that is greater than zero.
+ * Elements with visibility: hidden or opacity: 0 are considered visible,
+ * since they still consume space in the layout.
+ *
+ * @param {HTMLElement} el
+ * @returns {boolean} Whether or not the element is visible
+ */
+ Imager.isElementVisible = function (el) {
+ return el.offsetWidth > 0 || el.offsetHeight > 0;
+ };
+
  /**
  * Returns the naturalWidth of an image element.
  *

test/fixtures/hidden.html

@@ -0,0 +1,19 @@
+<style>
+ div { height: 10px; }
+ #hidden-element-implicit { height: 0; width: 0; }
+</style>
+
+<div id="visible-element" class="delayed-image-load" data-src="base/test/fixtures/media/A-320.jpg"></div>
+
+<div id="main" style="display: none;">
+ <div id="hidden-child" class="delayed-image-load" data-src="base/test/fixtures/media/B-320.jpg"></div>
+ <div class="child">
+ <div id="hidden-sub-child" class="delayed-image-load" data-src="base/test/fixtures/media/B-640.jpg"></div>
+ </div>
+</div>
+
+<div id="hidden-element" style="display: none;" class="delayed-image-load" data-src="base/test/fixtures/media/C-320.jpg"></div>
+<div id="hidden-element-visibility" style="visibility: hidden;" class="delayed-image-load" data-src="base/test/fixtures/media/C-320.jpg"></div>
+<div id="hidden-element-implicit" class="delayed-image-load" data-src="base/test/fixtures/media/C-320.jpg">
+ <!-- no height -->
+</div>

test/unit/core.js

@@ -276,4 +276,77 @@ describe('Imager.js', function () {
  expect(imgr.isThisElementOnScreen(element)).to.equal(true);
  });
  });
+
+ describe('checkImagesNeedReplacing', function () {
+
+ it('ignores images which are hidden when loadHidden is set to false', function () {
+ var imager = new Imager({
+ loadHidden: false
+ }),
+ imageVisibilities = [true, false, true];
+
+ sandbox.stub(imager, 'refreshPixelRatio');
+ sandbox.stub(Imager, 'isElementVisible').returnsArg(0);
+ sandbox.stub(imager, 'replaceImagesBasedOnScreenDimensions');
+
+ imager.checkImagesNeedReplacing(imageVisibilities);
+
+ // Only the first and third image should be replaced
+ expect(imager.replaceImagesBasedOnScreenDimensions.callCount).to.equal(2);
+ expect(imager.replaceImagesBasedOnScreenDimensions.getCall(0).args[0]).to.equal(true);
+ expect(imager.replaceImagesBasedOnScreenDimensions.getCall(1).args[0]).to.equal(true);
+ });
+
+ it('replaces all images if loadHidden is set to true (default)', function () {
+ var imager = new Imager(),
+ imageVisibilities = [true, false, true];
+
+ sandbox.stub(imager, 'refreshPixelRatio');
+ sandbox.stub(Imager, 'isElementVisible').returnsArg(0);
+ sandbox.stub(imager, 'replaceImagesBasedOnScreenDimensions');
+
+ imager.checkImagesNeedReplacing(imageVisibilities);
+
+ // All images should be loaded
+ expect(imager.replaceImagesBasedOnScreenDimensions.callCount).to.equal(3);
+ expect(imager.replaceImagesBasedOnScreenDimensions.getCall(0).args[0]).to.equal(true);
+ expect(imager.replaceImagesBasedOnScreenDimensions.getCall(1).args[0]).to.equal(false);
+ expect(imager.replaceImagesBasedOnScreenDimensions.getCall(2).args[0]).to.equal(true);
+ });
+ });
+
+ describe('isElementVisible', function () {
+
+ it('should return true if element is visible', function () {
+ fixtures = loadFixtures('hidden');
+ expect(Imager.isElementVisible(fixtures.querySelector('#visible-element'))).to.equal(true);
+ expect(Imager.isElementVisible(fixtures.querySelector('#visible-element'))).to.equal(true);
+ });
+
+ it('should return true if the element is set to visiblity: hidden', function () {
+ fixtures = loadFixtures('hidden');
+ expect(Imager.isElementVisible(fixtures.querySelector('#hidden-element-visibility'))).to.equal(true);
+ });
+
+ it('should return false if the element itself is display: none', function () {
+ fixtures = loadFixtures('hidden');
+ expect(Imager.isElementVisible(fixtures.querySelector('#hidden-element'))).to.equal(false);
+ });
+
+ it('should return false if the element has no height or width', function () {
+ fixtures = loadFixtures('hidden');
+ expect(Imager.isElementVisible(fixtures.querySelector('#hidden-element-implicit'))).to.equal(false);
+ });
+
+
+ it('should return false if the element is within a display: none element', function () {
+ fixtures = loadFixtures('hidden');
+ expect(Imager.isElementVisible(fixtures.querySelector('#hidden-child'))).to.equal(false);
+ });
+
+ it('should return false if the element is within a child of a display: none element', function () {
+ fixtures = loadFixtures('hidden');
+ expect(Imager.isElementVisible(fixtures.querySelector('#hidden-sub-child'))).to.equal(false);
+ });
+ });
 });