Selectively Serving Images Using HTML5 “data-” attribute & Match Media for Responsive Site

[robhawk]

Hi,

Having recently purchased the “Implementing Responsive Design” book I’ve been using some of the approaches on a current project, good book!

I have one problem that I’m struggling to get to grips with when I’m serving images to certain screen sizes. I’m using the “data-” attribute and matchmedia to only pull in a couple of images once a certain screen dimension is hit. This works perfectly across Firefox, Chrome, Safari, Opera but with IE9 the element inserted via matchmedia has a width and height attached to it thus breaking the responsive nature of the image and also my layout!

So my question is how would I go about removing the height & width element from the image returned by the matchmedia javascript or is there another solution?

Here is my code (all from the book rather than written by myself) below in hope that someone much smarter than me can help me with a solution.

HTML First

---

Here’s the Javascript

---

window.onload = function() {

//images enhancement
if (window.matchMedia(“(min-width: 46.875em)”).matches) {
//load in the images

var lazy = Utils.q(‘[data-src]’);
for (var i = 0; i < lazy.length; i++) {
var source = lazy.getAttribute(‘data-src’);
//create the image
var img = new Image();
img.src = source;
//insert it inside of the link
lazy.insertBefore(img, lazy.firstChild);
};

I’m not sure why this is but am guessing if it’s an IE9 “thing” there must be a way of removing the height and width values returned with the element.

I’m pretty new to this especially the javascript so help really is appreciated.

Regards

Rob

[robhawk]

Hi,

Firstly thanks for getting back to me so quickly with help. I’ve tried the above but the height and width are still shown in IE.

//images enhancement
if (window.matchMedia(“(min-width: 46.875em)”).matches) {
//load in the images

var lazy = Utils.q(‘[data-src]’);
for (var i = 0; i < lazy.length; i++) {
var source = lazy.getAttribute(‘data-src’);
//create the image
var img = new Image();
img.src = source;
//insert it inside of the link
img.removeAttribute(‘height’);
img.removeAttribute(‘width’);
lazy.insertBefore(img, lazy.firstChild);
};

Perhaps I’ve done something wrong?!

Look forward to hearing from you.

Regards

Rob

[robhawk]

Sorry I tried with it below the line starting lazy as well.

like so but still visible in IE…

/images enhancement
if (window.matchMedia(“(min-width: 46.875em)”).matches) {
//load in the images

var lazy = Utils.q(‘[data-src]’);
for (var i = 0; i < lazy.length; i++) {
var source = lazy.getAttribute(‘data-src’);
//create the image
var img = new Image();
img.src = source;
//insert it inside of the link
lazy.insertBefore(img, lazy.firstChild);
img.removeAttribute(‘height’);
img.removeAttribute(‘width’);
};

[robhawk]

I’ve just found and tried this and it adds the height “auto” as an inline style which overrides the hard set height parameter.

I think the removal of the height and width would be cleaner although this does work. What do you think?

$(‘.support img’).css({
height: ‘auto’
});

[robhawk]

Thanks for the help…

[reececonrad]

Robhawk, did that work?

[Author]

Posts