Skip to content
This repository was archived by the owner on Jan 16, 2026. It is now read-only.

Adding support for CSS background images #134

Open
Tasemu wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Adding support for CSS background images #134

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 50 additions & 8 deletions Imager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,7 @@
this.widthsMap = {};
this.refreshPixelRatio();
this.widthInterpolator = opts.widthInterpolator || returnFn;
this.cssBackgrounds = opts.cssBackgrounds || false;

// Needed as IE8 adds a default `width`/`height` attribute…
this.gif.removeAttribute('height');
Expand Down Expand Up @@ -161,7 +162,13 @@

if (elements && elements.length) {
var additional = applyEach(elements, returnFn);
this.changeDivsToEmptyImages(additional);

if (!this.cssBackgrounds) {
this.changeDivsToEmptyImages(additional);
} else {
this.prepareCssBackground(additional);
}

this.divs = this.divs.concat(additional);
}
};
Expand All @@ -187,7 +194,12 @@
window.clearInterval(self.interval);
}

this.changeDivsToEmptyImages(elements);
if (!this.cssBackgrounds) {
this.changeDivsToEmptyImages(elements);
} else {
this.prepareCssBackground(elements);
}

this.scrolled = false;
}
};
Expand Down Expand Up @@ -266,6 +278,19 @@
}
};

Imager.prototype.prepareCssBackground = function (elements) {
var self = this;

applyEach(elements, function(element) {
var elementClassName = element.getAttribute('data-class');
element.className = (elementClassName ? elementClassName + ' ' : '') + self.className;
});

if (this.initialized) {
this.checkImagesNeedReplacing(elements);
}
};

/**
* Indicates if an element is an Imager placeholder
*
Expand Down Expand Up @@ -326,25 +351,42 @@
Imager.prototype.replaceImagesBasedOnScreenDimensions = function (image) {
var computedWidth, naturalWidth;

naturalWidth = Imager.getNaturalWidth(image);
computedWidth = typeof this.availableWidths === 'function' ? this.availableWidths(image)
: this.determineAppropriateResolution(image);
naturalWidth = Imager.getNaturalWidth(image);
if (!this.cssBackgrounds) {
computedWidth = typeof this.availableWidths === 'function' ? this.availableWidths(image)
: this.determineAppropriateResolution(image);
} else {
computedWidth = typeof this.availableWidths === 'function' ? this.availableWidths(image)
: this.getBackgroundElementWidth(image);
}

image.width = computedWidth;

if (!this.isPlaceholder(image) && computedWidth <= naturalWidth) {
return;
}

image.src = this.changeImageSrcToUseNewImageDimensions(image.getAttribute('data-src'), computedWidth);
image.removeAttribute('width');
image.removeAttribute('height');
if (!this.cssBackgrounds) {
image.src = this.changeImageSrcToUseNewImageDimensions(image.getAttribute('data-src'), computedWidth);
image.removeAttribute('width');
image.removeAttribute('height');
} else {
this.applyBackgroundImage(image, this.changeImageSrcToUseNewImageDimensions(image.getAttribute('data-src'), computedWidth));
}
};

Imager.prototype.applyBackgroundImage = function (image, url) {
image.style.backgroundImage = 'url(' + url + ')';
};

Imager.prototype.determineAppropriateResolution = function (image) {
return Imager.getClosestValue(image.getAttribute('data-width') || image.parentNode.clientWidth, this.availableWidths);
};

Imager.prototype.getBackgroundElementWidth = function (element) {
return Imager.getClosestValue(element.clientWidth, this.availableWidths);
};

/**
* Updates the device pixel ratio value used by Imager
*
Expand Down
3 changes: 3 additions & 0 deletions test/fixtures/multiple.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<div class="delayed-image-load imager-image" data-src="base/test/fixtures/media/C-{width}.jpg"></div>
<div class="delayed-image-load responsive-background-image" data-src="base/test/fixtures/media/B-{width}.jpg" data-width="640"></div>
<div class="delayed-image-load imager-image" data-src="base/test/fixtures/media-{width}/fillmurray.jpg" data-width="320"></div>
71 changes: 71 additions & 0 deletions test/unit/html-options.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,77 @@ describe('Imager.js HTML data-* API', function () {
cleanFixtures(fixtures);
});

describe('CSS Background Support', function () {
it('should not replace divs with images', function (done) {
fixtures = loadFixtures('data-src-new');
var imgr = new Imager({cssBackgrounds: true, availableWidths: [640, 320]});

imgr.ready(function () {
applyEach(imgr.divs, function (el) {
expect(el).to.have.property('nodeName', 'DIV');
});

done();
});
});

it('should apply a css class to cssBackground enables divs', function (done) {
fixtures = loadFixtures('data-src-new');
var imgr = new Imager({cssBackgrounds: true, availableWidths: [640, 320], className: 'bg-responsive-img image-replace'});

imgr.ready(function () {
applyEach(imgr.divs, function (el) {
expect(el.className).to.equal('bg-responsive-img image-replace');
});

done();
});
});

it('should set the inline background-image', function (done) {
fixtures = loadFixtures('data-src-new');
var imgr = new Imager({cssBackgrounds: true, availableWidths: [640, 320]});

imgr.ready(function () {
var src = applyEach(imgr.divs, function (el) {
return el.getAttribute('style');
});

expect(src).to.eql([
'background-image: url(http://localhost:9876/base/test/fixtures/media/C-640.jpg); ',
'background-image: url(http://localhost:9876/base/test/fixtures/media/B-640.jpg); ',
'background-image: url(http://localhost:9876/base/test/fixtures/media-640/fillmurray.jpg); '
]);

done();
});
});

it('should work for both images and background images', function (done) {
fixtures = loadFixtures('multiple');
var images = document.querySelectorAll('.imager-image');
var backgrounds = document.querySelectorAll('.responsive-background-image');
var imageImgr = new Imager(images, {availableWidths: [320, 640]});
var backgroundImgr = new Imager(backgrounds, {cssBackgrounds: true, availableWidths: [320, 640]});

imageImgr.ready(function () {
var src = applyEach(imageImgr.divs, function (el) {
return el.getAttribute('src');
});
expect(src).to.eql(['base/test/fixtures/media/C-640.jpg', 'base/test/fixtures/media-320/fillmurray.jpg']);

backgroundImgr.ready(function () {
var src = applyEach(backgroundImgr.divs, function (el) {
return el.getAttribute('style');
});
expect(src).to.eql(['background-image: url(http://localhost:9876/base/test/fixtures/media/B-640.jpg); ']);
done();
});

});
});
});

describe('handling {width} in data-src', function () {
it('should not use RegExp anymore', function (done) {
fixtures = loadFixtures('data-src-old');
Expand Down