search

thinkpixellab / PxLoader

PxLoader is a simple JavasScript library for creating preloaders and resource downloaders for HTML5 apps.
http://thinkpixellab.com/pxloader
1.11k stars 171 forks source link

GIF images skipping to end on IE #6

Closed deathau closed 12 years ago

deathau commented 12 years ago

For some reason, in IE, after pre loading an animated gif and placing it on the page, the animation is on the last frame (for non-looping gifs). Examlpe of issue: http://jsfiddle.net/xJveS/4/

joelfillmore commented 12 years ago

It looks like once an animated gif has been played the browser doesn't replay it even if you add it as a completely different element. I see that behavior in both Chrome and IE when adding additional animated gifs with the same URL. I'm guessing that IE begins the animation even if the element isn't in the DOM while other browsers wait until its added. That would explain why you only see the issue with your sample in IE. Unfortunately you are at the mercy of how each browser implements animated gifs. I don't think its possible to fix this in PxLoader.

Here are a couple of alternatives you could try:

  1. Don't preload the animated gif. You could hide the static image once the animated gif loads (not using PxLoader) and then show it again once the animation ends.
  2. Break up the tablet into multiple image elements and then animate them using jQuery, css transitions, or canvas. You could use PxLoader in this scenario to make sure all the images are loaded first.

If you are still having issues after trying these options, try posting your scenario as a question on StackOverflow and you'll probably get some other solutions to try.

deathau commented 12 years ago

I thought the same as you, and I did post on StackOverflow asking for options. In fiddling with getting it working, I ended up writing my own preloader that seems to work fine (well, sometimes it jumps to the end on the first click in IE, but seems to work fine afterwards...): http://jsfiddle.net/VW8jd/9/ I went looking into the PxLoaderImage code, and although my code is extremely basic, it seems like it's doing the same thing. So, what would the difference be between PxLoader and my own preloader? Because I've built my own preloader which works, I'm using that for the animated .gifs after PxLoader has finished loading everything else (other images, sounds), so my issue is "solved", but I find it odd that PxLoader-loaded animations behave differently...

joelfillmore commented 12 years ago

Yes, that does seem strange. I tried to look at the jsfiddle but their servers are in the middle of an upgrade and it wouldn't load that url. I was able to get an earlier version to open but that one doesn't work in IE for me. Looking at the code, one thing that might explain the difference is that your simplified loader isn't keeping a reference to the img element. Given some of the issues I saw earlier when adding mutliple animated gifs with the same url that seems like a possibility. I'll take another look once the jsfiddle servers are back.