Using jQuery to change image src when browser is resized

Question

I have two different sized images, one if for screens smaller than 759px, the other is for screens larger than 759px.

I have managed to get the source of the images

Answer 1

Try to use css3 media queries instead of doing it in jQuery or javascript.

http://css-tricks.com/media-queries-sass-3-2-and-codekit/

Consider using "img-src" class on a . Whenever the screen is resized b/w 600px to 900px; x2.jpg will be loaded. By default x1.jpg will be used.

Ex:

.img-src {
   background-image: url("http://imageurlhere.com/x1.jpg");
}


@media (min-device-width:600px) and (max-width:900px) {
  .img-src {
      background-image: url("http://imageurlhere.com/x2.jpg");
   }
}