Hello,
I am currently using reposnd.js to assist in making my site responsive for legacy browsers but I’ve come up with what is to me (as in i’m very poor with javascript) a pretty big issue.
On all modern browsers including IE9 my conditional loading of images for larger screen sizes using matchMedia (all code obtained from the excellent Implementing Responsive Design book – see below) works perfectly but on IE8 I’m left with empty spaces where the images should be loaded. I’ve spent the past couple of hours looking around for a solution but to be totally honest have ended up in a state of near total confusion.
I’d really appreciate it if someone would spend me the time to a) recommend a robust solution and b) explain how it should be implemented within my site.
If it helps here is the code (from the book) that I’ve been using:
< div data-src="images/supporting-project1.jpg" class="support">
and 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);
$(‘.support img’)
.removeAttr(“width”).removeAttr(“height”)
.css({height: “auto” });
};
I Understand that matchMedia is not supported for IE8 hence why this approach fails for this browser.
Any help could would be much appreciated.
Regards
Rob
