0

Animation is difficult with GIF images due to white borders on text and other pixelation and dithering issues. So I have decided despite the lack of support for PNG on IE especially fadeIn or fadeOut jQuery effects on PNG causing black borders to do it.

I have a folder like

/cdn.com/ui/photo/1.png
/cdn.com/ui/photo/2.png
/cdn.com/ui/photo/3.png

This is my HTML code, is there anway to add a delay or somehow loop and change the source of say 1-38 and keep looping it - maybe even customize the delay? I just want it to keep looping smoothly like a fully load gif..

<div class="m2m_badge">
    <a href="#"><img src="///cdn.com/ui/photo/1.png"/></a>
</div>

This is my jQuery

$(function()
{
    var i = 0;
    var interval = setInterval(function()
    {
        $('div.m2m_badge a img').attr({ src: '//gc-cdn.com/ui/m2m/' + i + '.png' });
        i++;
        if(i === 38)
            clearInterval(interval);
    }, 250);
});

Demo - http://jsfiddle.net/tXvuY/13/

TheBlackBenzKid
  • 26,324
  • 41
  • 139
  • 209

1 Answers1

1
$(function()
{
    var i = 1;
    var interval = setInterval(function()
    {
        $('div.m2m_badge a img').attr({ src: 'http://www.gc-cdn.com/ui/m2m/' + i + '.png' }); 
        i++;
        if(i === 38)
            clearInterval(interval); //38 images has been shown, stop the interval
    }, 50); //50ms between each swap
});

Here's a demo

Final working

To have a continuous loop just add i=1; within the interval if

$(function()
{
    var i = 1;
    var interval = setInterval(function()
    {
        $('img').attr({ src: 'http://www.gc-cdn.com/ui/m2m/' + i + '.png' });
        i++;
        if(i === 38)
            i=1; // SOLUTION
    }, 250); 
});
Community
  • 1
  • 1
Johan
  • 35,120
  • 54
  • 178
  • 293
  • Can I prevent it from flashing the last image at the loop and starting again - just so it appears constant.. like here - http://jsfiddle.net/tXvuY/10/ – TheBlackBenzKid Sep 26 '12 at 10:41
  • Rather than only post a block of code, please *explain* why this code solves the problem posed. Without an explanation, this is not an answer. – Martijn Pieters Sep 26 '12 at 10:43
  • Thanks, no not quite. I just want it to keep looping through 1-38 smoothly without flashing ... that just stops after 38 – TheBlackBenzKid Sep 26 '12 at 10:49
  • @TheBlackBenzKid Yea i forgot to change that when i removed the array from the answer. But its updated – Johan Sep 26 '12 at 11:02
  • @TheBlackBenzKid If the images flicker the first time a user visits the page, i would recommend preloading them: http://stackoverflow.com/questions/476679/preloading-images-with-jquery Just a tip – Johan Sep 26 '12 at 11:04
  • It was not a flickering issue with regards to loading. It was because the interval was starting again - CSS and JavaScript preloading is paramount recommendation to stick by – TheBlackBenzKid Sep 26 '12 at 12:30