StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POswap images w/ jquery based on their existence on the server
text
Body
copied!<p>I've been trying to figure out this semi-specific problem for the past couple days, and I could really use another pair of eyes on it.</p> <p>My goal is to have an image on the page. It starts out as a static png, and when it's clicked, it swaps out with a .gif and plays an animation. When it's click on again, it swaps again and plays a second .gif animation. It does the same thing a third time. When the 3rd .gif is clicked on, it plays the 1st gif animation again, and the process starts all over again.</p> <p>My issue is that multiple images are loaded on the page, and some have 3 total gif animations, some have 2, and some have one.</p> <p>So what I'm trying to do is check if the .gifs exist before I load the next one.</p> <p>Here's an excerpt with some of my notation...</p> <pre><code>$('#postContainer img').click(function () { imgSrc = $(this).attr('src'); if(imgSrc.indexOf('_B.png') != -1){ imgSrcToUse = imgSrc.replace('_B.png', '_pt1.gif'); $(this).attr('src', imgSrcToUse); return false; } </code></pre> <p>That code above runs when the image is clicked. It finds the image src, and replace the static png with the first animated gif. all the images have an animated gif, so this isn't a problem.</p> <pre><code>if (imgSrc.indexOf('_pt1.gif') != -1) { var POS2 = imgSrc.replace('_pt1.gif', '_pt2.gif'); $.ajax({ url: POS2, type: 'HEAD', error: function() { alert('error'); imgSrcToUse = imgSrc.replace('_pt1.gif', '_pt1.gif'); }, success: function() { alert('success'); imgSrcToUse = imgSrc.replace('_pt1.gif', '_pt2.gif'); } }); $(this).attr('src', imgSrcToUse); return false; } </code></pre> <p>After <code>_pt1</code> is loaded, then this function runs the next time you click. it is supposed to check if a <code>_pt2</code> exists, and if it does, then swap out the pt1 with pt2. HOWEVER, it only seems to be working on the second click. if i click it once, it loads <code>_pt1</code> again, and then the second time through it will load <code>_pt2</code> properly. this is where my major problem lies...</p> <p>i apologize if this is convoluted but i'm really stumped here. i'll try to do my best to clear things up if you guys are way too confused.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload