Using jQuery to change src image when resizing browser

Question

I have two different image sizes, one for screens smaller than 759 pixels, the other for screens larger than 759 pixels.

I managed to get a source of images to change when loading a document depending on the width of the window. But I really would like to be able to do this when the browser is also changed, but for life I can not get it to do this, it looks like it works when the page is initially loaded.

This is my code:

$(document).ready(function() { function imageresize() { var contentwidth = $(window).width(); if ((contentwidth) < '700'){ $('.fluidimage').each(function(){ var thisImg = $(this); var newSrc = thisImg.attr('src').replace('x2', 'x1'); thisImg.attr('src', newSrc); }); } else { $('.fluidimage').each(function(){ var thisImg = $(this); var newSrc = thisImg.attr('src').replace('x1', 'x2'); thisImg.attr('src', newSrc); }); } } imageresize();//Triggers when document first loads $(window).bind("resize", function(){//Adjusts image when browser resized imageresize(); }); }); 

Answer 1

First try this ...

change your next line of code

 $(window).bind("resize", function(){//Adjusts image when browser resized imageresize(); }); 

to

 // Bind event listener $(window).resize(imageresize); 

and put a warning inside imageresize to see if it works or not ...

In case the above does not work ... I believe that there is one problem, probably.

in your code there

 $(document).ready(function() { $(window).bind("resize", function(){//Adjusts image when browser resized imageresize(); }); } 

Thus, the function to stay inside jquery may not work correctly. Also, try using simple javascript; I had a similar problem and decided to use simple javascript and jquery did not work in some browsers.

The sound is strange enough that you do not try on it, but it will work ...

Answer 2

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

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

Consider using the img-src class on a. Whenever the screen size changes from 600 pixels to 900 pixels; x2.jpg will be downloaded. By default, x1.jpg will be used.

Example:

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

Answer 3

This is not jQuery, but you can just use document.getElementById("myId").src="another.jpg"; to define a new src img with id "myId".

Answer 4

Your code works fine, as I see, but I prefer to use setTimeout , sometimes the page can slow down without resizing.

 $(document).ready(function() { var resizeTimer, $window = $(window); function imageresize() { if ($window.width() < 700) { $('.fluidimage').text('< 700'); } else { $('.fluidimage').text('>= 700'); } } imageresize();//Triggers when document first loads $window.resize(function() { clearTimeout(resizeTimer); resizeTimer = setTimeout(imageresize, 100); }); }); 

Example: jsfiddle.net/SAbsG/