Change image source based on viewport width

Question

<script type="text/javascript">
  $(window).resize(function(){
  var width = $(window).width(); 

   if (width < 361) {
      $(".infograph-image").attr("src","/images/infographicHowMobile.png");
   }
 }); 
</script>

I wish to change the image source of a given image, based on the viewport width size. If the viewport width size is 360 or less, change to a mobile version of the image.

I have two simple questions:

1) How can we do both: a) detect windows resize AND document ready ?

This, I believe I got:

I need to change that into a function. Then call it on load;

checkResponsive();

Then bind a event listener:

$(window).resize(checkResponsive);

2) We have several images that need to have a mobile version, should this be converted to a function ? Or several ifs may work ?

Can you please give me a kick-off start on those two questions please.

@prashanth: window.resize is that I have on the code sample posted. Media queries, is there a way to change the img src using media queries ? — MEM
– MEM, Commented Oct 8, 2012 at 15:18
I would say use media queries. also if you want you can do something like this also : jquerypicture.com it is a great plugin, just resize the window and you will understand it. I hope it helps\ — Dhruvenkumar Shah
– Dhruvenkumar Shah, Commented Oct 8, 2012 at 15:27
@prashanth thanks a lot for your answer. However, that will not work. I'm totally aware of background image change using css, but that's not the case here. — MEM
– MEM, Commented Oct 8, 2012 at 15:27

Oldskool · Accepted Answer · 2012-10-08 15:30:03Z

1

Create a seperate function and call them on both events. So, for example, create the function mobileImg() like this:

function mobileImg(targetClass, imageSrc) {
    var width = window.innerWidth; // No need for jQuery here, raw JS can do this

    if(width < 361) {
        $(targetClass).attr("src", imageSrc);
    }
}

And then call this on both events.

$(document).ready(mobileImg(".infograph-image", "/images/infographicHowMobile.png"));
$(window).resize(mobileImg(".infograph-image", "/images/infographicHowMobile.png"));

You can then call the mobileImg method as much as you want and with whatever params. If you really want to make it clean, also add a check if the passed element and image exist at all and use fallbacks where needed.

answered Oct 8, 2012 at 15:30

Oldskool

35k7 gold badges56 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MEM Over a year ago

I'm not getting this. If I have infographicHowMobile and infographicAboutMobile and infographicOtherImageMobile and infographicYetAnotherImageMobile, I need to call 8 times document.ready and window.resize ? :s

Oldskool Over a year ago

@MEM No, you would stack them in 1 call. Like: $(document).ready(mobileImg(".class1", "img1"); mobileImg(".class2", "img2")); and so on... Or pass targetClass/imageSrc as arrays to the function and loop over all of them.

MEM Over a year ago

@Oldskook - thanks a lot, I end up using the following very VERY nice script that does the job the same way I wished to have been done: responsejs.com

Collectives™ on Stack Overflow

Change image source based on viewport width

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related