Image replacement in jQuery

Question

I can't get this to do what I want it to do! I'm trying to replace large images with smaller ones for mobile browsers.

Here is the code:

function js_imgs() {
    if (document.documentElement.clientWidth <= 600) {
        $("img").each(function(){
            if ($(this).hasClass('big')) {
                var preSrc = $(this).attr('src');
                var newSrc = preSrc.substring(preSrc.lastIndexOf('/'), preSrc.lastIndexOf('.'));
                $(this).attr('src', newSrc + '-m.' + /[^.]+$/.exec(preSrc));
                $(this).removeClass('big').addClass('mobile');
            }
        });
    } else {
        $("img").each(function(){
            if ($(this).hasClass('mobile')) {
                var preSrc = $(this).attr('src');
                var newSrc = preSrc.substring(preSrc.lastIndexOf('/'), preSrc.lastIndexOf('.'));
                $(this).attr('src', newSrc + '.' + /[^.]+$/.exec(preSrc));
                $(this).removeClass('mobile').addClass('big');
            }
        });
    }
};

For the first image, this code works swimmingly. Unfortunately, all the other images have their SRCs rewritten as the first image's SRC. They all turn into the same image; which resize wonderfully, but aren't the right image.

What have I done wrong? I've tried almost all of the variations on this in this thread with no success.

Answer 1

Firstly I would simplify the function, it is not worthy to verify if you are in mobile, because the first time you enter the page, it verifies if it is big enough or not.

It would be like this:

function js_imgs() {
    if (document.documentElement.clientWidth <= 600) {
        $("img").each(function(){
            if ($(this).hasClass('big')) {
                var preSrc = $(this).attr('src');
                var newSrc = preSrc.substring(preSrc.lastIndexOf('/'), preSrc.lastIndexOf('.'));
                $(this).attr('src', newSrc + '-m.' + /[^.]+$/.exec(preSrc));
                $(this).removeClass('big').addClass('mobile');
            }
        });
};

Notwithstanding, this work could be done better in serverside, there is a fantastic script in different server languages (asp.net, php...) to detect if it is a mobile:

detectmobilebrowser.com/

Another thing, I am not quite sure if the width (600) is too big, I woulld have use 350px, try facebook in mobile, it works for these dimensions.

Answer 2

Went away for a rest, then came back and discovered I had been testing my code by refreshing and refreshing the out-of-date copy on the server instead of the one I was editing at localhost.

Sorry! I have been working too long.

Here is a working version of the code:

function js_imgs() {
    if (document.documentElement.clientWidth <= 600) {
        $("img").each(function(){
            if ($(this).hasClass('big')) {
                var oldSrc = $(this).attr('src');
                var newSrc = oldSrc.substring(0, oldSrc.lastIndexOf('/')) + oldSrc.substring(oldSrc.lastIndexOf('/'), oldSrc.lastIndexOf('.'));
                $(this).attr('src', newSrc + '-m.' + /[^.]+$/.exec(oldSrc));
                $(this).removeClass('big').addClass('mobile');
            }
        });
    } else {
        $("img").each(function(){
            if ($(this).hasClass('mobile')) {
                var oldSrc = $(this).attr('src');
                var newSrc = oldSrc.substring(0, oldSrc.lastIndexOf('/')) + oldSrc.substring(oldSrc.lastIndexOf('/'), oldSrc.lastIndexOf('.'));
                $(this).attr('src', newSrc.replace(/([^.]*)-m/, "$1") + '.' + /[^.]+$/.exec(oldSrc));
                $(this).removeClass('mobile').addClass('big');
            }
        });
    }
};

js_imgs();

$(window).resize(function($){
    js_imgs();
});

This is written for on-the-fly switching on window resizes, which is almost certain to be entirely unnecessary. Perhaps when switching from portrait to landscape on high-resolution iPhones or tablets, the extra code might be worthwhile; I will have to do some testing.

Improvements and comments on the worthiness of on-the-fly switching more than welcome.