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