Grow your CSS skills. Land your dream job.

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

  • # December 7, 2012 at 5:47 am

    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

    # December 7, 2012 at 6:14 am

    http://reference.sitepoint.com/javascript/Element/removeAttribute

    try inserting this bit of code at the last but one line of the code above

    img.removeAttribute(‘height’);
    img.removeAttribute(‘width’);

    # December 7, 2012 at 6:24 am

    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

    # December 7, 2012 at 6:27 am

    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’);
    };

    # December 7, 2012 at 6:40 am

    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’
    });

    # December 7, 2012 at 6:58 am

    oh your using jquery, aswell
    in that case try

    $(‘.support img’).removeAttr(‘width’).removeAttr(‘height’);

    might have better chance.

    # December 8, 2012 at 4:57 am

    Thanks for the help…

    # December 21, 2012 at 10:07 am

    Robhawk, did that work?

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".