How do I change an img src on window resize?
<p>I'm having a bit of a dilemma with swapping out images depending on browser dimensions.</p>

<p>I have a collection of images on my page that I need to switch out when the browser is resized. I've basically divided up all my images into subfolders for their specific widths. ie. I have a folders called '1280', '1152', '1024' etc. When the browser is re-sized and it hits the correct breakpoint, I use javascript to to a find and replace on the folder name.</p>

<p>As it stands, the code I have <em>does</em> work but only when the page is reloaded. If the user keeps their mouse down and resizes the window, the paths won't change, or rather it seems they won't change after the first breakpoint is hit ie. from a width > 1280px down to anything less than 1152px. </p>

<p>The problem is I've spent an entire day coding and I only got into this towards the end of the day.. so my mind has gone completely fuzzy and I can't think this out logically! If anyone can help me here I'd greatly appreciate it as I have a tight deadline and I need to get this finished.</p>

<p>I've trimmed down the code to make it clearer but this is what I have so far:</p>

<pre><code>&lt;img src="/images/1280/img1.jpg" alt="" class="swap" /&gt;
&lt;img src="/images/1280/img2.jpg" alt="" class="swap" /&gt;
&lt;img src="/images/1280/img3.jpg" alt="" class="swap" /&gt;
&lt;img src="/images/1280/img4.jpg" alt="" class="swap" /&gt;
&lt;img src="/images/1280/img5.jpg" alt="" class="swap" /&gt;
</code></pre>

<p>And the javascript:</p>

<pre><code>function checkResolution() {
    // Resolution width &gt; 1280px
    if ($(window).innerWidth() &gt; 1280) {
        replaceImagePaths("1280");
    }
    // Resolution 1152px - 1279px
    else if ($(window).innerWidth() &gt;= 1152 &amp;&amp; $(window).innerWidth() &lt;= 1279) {
        replaceImagePaths("1152");
    }
    // Resolution width 1024px - 1151px
    else if ($(window).innerWidth() &gt;= 1024 &amp;&amp; $(window).innerWidth() &lt;= 1151) {
        replaceImagePaths("1024");
    }
    // Resolution width 768px - 1023px
    else if ($(window).innerWidth() &gt;= 768 &amp;&amp; $(window).innerWidth() &lt;= 1023) {
        replaceImagePaths("768");
    }
    // Resolution width &lt; 768px
    else if ($(window).innerWidth() &lt;= 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));
    }
}​
</code></pre>

<p>What seems odd is that assuming you start from a browser width of greater than 1280 and resize down, the paths will switch for the next measurement down ie. from 1280 to 1152, but after that it doesn't seem to work. They <em>do</em> however all work when the page is refreshed after re-sizing.</p>

<p>I know it has something to do with my replaceImagePaths() function but I can't work out where I'm going wrong. The theory behind that function was that I'd just blanket replace every path but it almost seems as though I'm overwriting the values.. I'm not sure. There's definately something quirky going on there.</p>

<p>Thanks for your help!</p>

<p>(p.s I realise there are many alternative methods for switching out images depending on browser size but in this particular situation, I have to use js to do so)</p>
