Need to create a animation with javascript (mimic gif) with jpgs

问题

I'm having a buch of jpegs coming from a old flash animation. They're named from 1000.jpg to 1092.jpg playing in that order. I tried to create a .gif animation with those pictures but the gif was simply to big and the quality was horrible.

This is why I tried to use jQuery to animate those jpegs to mimic this gif animation.

This is the code I found here on stackoverflow

$("#logo").click(function() {
var $logo = $(this), src = $logo.attr("src");
var index = src.indexOf('.jpg');
var step = +src.slice(index-4, index);

function frame() {
    step++;
    if(step < 93) {
        var newSrc = src.slice(0, index-4) + step + ".jpg";
        console.log(newSrc);
        $logo.attr('src', newSrc);
        setTimeout(frame, 50);
    }
}

frame();
});

But it's not working ... the animation time was 0,03 seconds each and I had the picture as "img id="logo" src="images/1000.jpg"/" (for sure with the <> ) but it's not working or changing the src.

Any help make that work? Thanks

Edit: Please help once again as this is driving me crazy. I tried the sprite thing but that doesnt work as you can see the fade how the background gets moved.

I really just need to mimic that gif, it's just a simple gif consisting out of 93 pics. It's just an animation where a face changes to another face ...

回答1:

/*
You are trying to set the `src` of a `div`. Set the `src` of an `img` instead:

<div>
  <img id="logo" src="mypath/mylittlepony.jpg">
</div>
*/
this doesn't apply anymore since the question was edited...

Now this JSFiddle works as you want it, at least in my browser (Firefox 4.0.1).

EDIT
start after load: look at this JSFiddle
start after load and endless loop: look at this final JSFiddle
extra gimmick: back and forth

You still do have a problem with caching. The animation is fluid only if all the images are cached. You could preload them by putting them as 1-px-imgs on your page.

<img src="http://iflorian.com/test/image/1000.jpg" height="1" width="1" alt="" />
<img src="http://iflorian.com/test/image/1001.jpg" height="1" width="1" alt="" />
<img src="http://iflorian.com/test/image/1002.jpg" height="1" width="1" alt="" />
...
<img src="http://iflorian.com/test/image/1050.jpg" height="1" width="1" alt="" />

Of course you can do this via JQuery, but then you could simply hold an array of image objects which replace the original image in the timer function.

回答2:

Just check on your Web Browsers' Error Console if Javascript is raising any error... because if any part of your JS raises an exception and fails to run then the effect might also fail. Happened to me at occassions.

来源：https://stackoverflow.com/questions/6939166/need-to-create-a-animation-with-javascript-mimic-gif-with-jpgs

标签

javascript

jquery

animated-gif