CODEWITHSUNDEEP
javascriptjqueryimage
FR STAR
FR STAR

Reputation: 702

Replacing the image by detecting the window size

I'm trying load different images by detecting browser siz via JQuery. Implemented code is as follows,

$(window).resize(function(){
        var w_size = $(window).width();
        var img_src = $("img").attr("src");

        if (w_size < 400) {
            var new_s_image = img_src.replace(".", "_s.");
            $("img").attr("src",new_s_image);
        }else if (w_size < 780){
            var new_m_image = img_src.replace(".", "_m.");
            $("img").attr("src",new_m_image);
        }
    });

Now the issue is each time when I resize the window it's apending the "_s." or "_m." eg: images/image_m_m_m.jpg. I need to append the "_s." or "_m." characheter only once even though user resized the window countless times.

Upvotes: 0

Views: 333

Answers (6)

kyooriouskoala
kyooriouskoala

Reputation: 583

Quite a number of people would suggest CSS based solution which can be a good alternative.

In the case that you still prefer to use jQuery, you'd need to modify a few things:

  1. Give a suffix for normal state on your img src

    For example: myimage_n.jpg

  2. Change the way you update the file name.

    Instead of just replacing a dot with new characters img_src.replace(".", "_s."), you can do this instead:

    trimmedSrc = myImageSrc.substr(0, myImageSrc.length - 5);
var newSrc = trimmedSrc + 'm.jpg';
myImage.attr("src", newSrc);

Working example: http://jsfiddle.net/shodaburp/wvyF6/

Cleaned up code: http://jsfiddle.net/shodaburp/wvyF6/2/

Upvotes: 1

Halim Qarroum
Halim Qarroum

Reputation: 14103

I don't think you need to change your images every time the size of the browser has changed. You might want to adopt the responsive way of handling images size.

For example, the following example will make all your images responsive :

img {  
    height: auto;  
    max-width: 100%;   
}

Changing the image in the src attribute is overkill because at the end, it will cause way too much bandwidth consumption due to the fact that every single image is going to be reloaded. Plus as you will not have to deal with multiple versions of your images, this will save you a lot of time during your development.

Upvotes: 0

Pete Uh
Pete Uh

Reputation: 630

Though there are css alternatives, as you have asked for a jQuery solution here is mine.

This code will handle multiple images and another condition could be added without too much bother.

The code is:

$(window).resize(function () {
    $("img").each(function() {
        var w_size = $(window).width();
        var img_src = $(this).attr("src").replace("_m", "").replace("_s", "");
        var new_image = (w_size < 400) ? img_src.replace(".", "_s.") : (w_size < 780) ? new_image = img_src.replace(".", "_m.") : img_src;
        $(this).attr("src", new_image);
    });
});

And you can see this working in this JSFiddle

Upvotes: 1

dfsq
dfsq

Reputation: 193271

I would recommend to use media queries to control what image version is currently visible. Consider the following example (I denoted small images with class s, and normal with m):

CSS:

@media all and (max-width: 400px) {
    .s {display: block;}
    .m {display: none;}
}
@media all and (min-width: 400px) {
    .m {display: block;}
    .s {display: none;}
}

And jQuery fallback for IE<9:

function adjustStyle(width) {
    width = parseInt(width);
    if (width < 400) {
        $('body').addClass('small');
    }
    else if (width > 400) {
        $('body').removeClass('small');
    }
}

$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});

http://jsfiddle.net/KGdyD/

In HTML you would have two images but only one will be visible in at time.

Upvotes: 0

Jorge Y. C. Rodriguez
Jorge Y. C. Rodriguez

Reputation: 3449

Why dont you just add a cover image. 

html {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-image: url(image.jpg);
    background-repeat: no-repeat;
    background-position: center center;
}

Upvotes: 0

Bhadra
Bhadra

Reputation: 2104

for your images use extensions as '_s.' and '_m.' for particular and normal image as '_n.' if you want to replace then you can replace '_n.' with '_m.' or '_s.' and they will not be appended again and again

$(window).resize(function(){
    var w_size = $(window).width();
    var img_src = $("img").attr("src");

    if (w_size < 400) {
        var new_s_image = img_src.replace("_n.", "_s.");
        $("img").attr("src",new_s_image);
    }else if (w_size < 780){
        var new_m_image = img_src.replace("_n.", "_m.");
        $("img").attr("src",new_m_image);
    }else if (w_size > 780){
        var new_m_image = img_src.replace("_m.", "_n.");
        var new_m_image = new_m_image.replace("_s.", "_n.");
        $("img").attr("src",new_m_image);
    }
});

Upvotes: 0

Related Questions