chrishoadley
10/3/2013 - 3:40 PM

Change image based on screen size using data attribute

Change image based on screen size using data attribute

function setMobileImages() {
    var resizer;
    $(window).on('resize.imobile', function () {
        $('img[data-desktop-src]:not(.no-auto)').each(function () {
            var width = $(window).width();
            if ((width <= 480) && ($(this).attr('data-mobile-src') !== undefined)) {
                updateBackground($(this), 'data-mobile-src');
            } else if ((width <= 1024) && ($(this).attr('data-tablet-src') !== undefined)) {
                updateBackground($(this), 'data-tablet-src');
            } else if ($(this).attr('data-desktop-src') != $(this).attr('src')) {
                updateBackground($(this), 'data-desktop-src');
            }
        });
    }).on('resize', function () {
        resizer = setTimeout(function () {
            $(window).trigger('resize.imobile');
        }, 500);
    }).trigger('resize.imobile');
}

function updateBackground($element, resolutionName) {
    if ($element.attr('src') == $element.attr(resolutionName))
        return;
    $element.attr('src', $element.attr(resolutionName));
}