How to change img src to resize window?

Question

I have a dilemma with replacing images depending on browser size.

I have a collection of images on my page that I need to disable when resizing the browser. I basically divided all my images into subfolders for their specific width. i.e. I have folders called "1280", "1152", "1024", etc. When the browser is changed and hits the correct breakpoint, I use javascript to search and replace in the folder name.

Be that as it may, the code I have works, but only when the page reloads. If the user holds his mouse and resizes the window, the paths will not change, or rather, they will not change after the first breakpoint is reached, i.e. from width> 1280px to less than 1152px.

The problem is that I spent a whole day encoding, and I just got to it before the end of the day .. so my mind went completely fuzzy, and I can not understand it logically! If anyone can help me, I would really appreciate it, as I have a limited time, and I need to finish this.

I shortened the code to make it clearer, but this is what I still have:

<img src="/images/1280/img1.jpg" alt="" class="swap" /> <img src="/images/1280/img2.jpg" alt="" class="swap" /> <img src="/images/1280/img3.jpg" alt="" class="swap" /> <img src="/images/1280/img4.jpg" alt="" class="swap" /> <img src="/images/1280/img5.jpg" alt="" class="swap" /> 

And javascript:

 function checkResolution() { // Resolution width > 1280px if ($(window).innerWidth() > 1280) { replaceImagePaths("1280"); } // Resolution 1152px - 1279px else if ($(window).innerWidth() >= 1152 && $(window).innerWidth() <= 1279) { replaceImagePaths("1152"); } // Resolution width 1024px - 1151px else if ($(window).innerWidth() >= 1024 && $(window).innerWidth() <= 1151) { replaceImagePaths("1024"); } // Resolution width 768px - 1023px else if ($(window).innerWidth() >= 768 && $(window).innerWidth() <= 1023) { replaceImagePaths("768"); } // Resolution width < 768px else if ($(window).innerWidth() <= 767) { replaceImagePaths("mobile"); } } $(window).resize(function() { checkResolution(); }); $(document).ready(function() { checkResolution(); }); function replaceImagePaths(resolution) { // Switch images $('.swap').each(function() { var imagePath = $(this).attr('src'); $(this).attr('src', imagePath.replace("mobile", resolution)); $(this).attr('src', imagePath.replace("768", resolution)); $(this).attr('src', imagePath.replace("1024", resolution)); $(this).attr('src', imagePath.replace("1152", resolution)); $(this).attr('src', imagePath.replace("1280", resolution)); } }​ 

It seems strange that if you start with a browser width greater than 1280 and resize down, the paths will switch to the next dimension down, i.e. from 1280 to 1152, but after that it does not seem to work. However, they all work when the page refreshes after recalibration.

I know this has something to do with my replaceImagePaths () function, but I can't figure out where I am going wrong. The theory of this function was that I just replaced the blankets every way, but it seems like I'm rewriting the values. I'm not sure. There is definitely something bizarre going on there.

Thank you for your help!

(ps I understand that there are many alternative methods for switching images depending on the size of the browser, but in this particular situation I have to use js for this)

Answer 1

Maybe you did not close your jQuery loop in the replaceImagePaths function? I also made some other minor improvements to the code.

 function checkResolution() { // Resolution width > 1280px if ($(window).innerWidth() > 1280) { replaceImagePaths("1280"); } // Resolution 1152px - 1279px else if ($(window).innerWidth() >= 1152 && $(window).innerWidth() <= 1279) { replaceImagePaths("1152"); } // Resolution width 1024px - 1151px else if ($(window).innerWidth() >= 1024 && $(window).innerWidth() <= 1151) { replaceImagePaths("1024"); } // Resolution width 768px - 1023px else if ($(window).innerWidth() >= 768 && $(window).innerWidth() <= 1023) { replaceImagePaths("768"); } // Resolution width < 768px else if ($(window).innerWidth() <= 767) { replaceImagePaths("mobile"); } } function replaceImagePaths(resolution) { // Switch images $('img.swap').each(function(){ var imagePath = $(this).attr('src'); $(this).attr('src', imagePath.replace(/mobile|768|1024|1152|1280/, resolution));//with the right regex you can do it all in one });//was missing the ");" } $(window).resize(function() { checkResolution(); }); $(function(){ checkResolution(); }); 

Answer 2

My suggestion was to simply completely replace the image element with the new image element with the new src, as I would say the browser considers that the image element has already loaded its image and ignores the src attribute changes.