freelance84 Posted July 16, 2011 Share Posted July 16, 2011 An ajax and gif issue. The loading indicators for ajax stuff... 1. i have been using animated gifs to achieve the affect: however i have some times runs into issues with animated gifs in that chrome will often mess up the timing. 2. I have noticed there are some issues on the smart phones in that some times their browsers mess up the timing too. sometimes resulting super fast looping. Even on big sites like facebook... etc. Does anyone have a better solution to animated gifs? I was think of js to manipulate a flat image... maybe a rotate 360deg with a time interval...?? any thought? Quote Link to comment Share on other sites More sharing options...
Alex Posted July 16, 2011 Share Posted July 16, 2011 What do you mean "mess up the timing"? Sounds like what you're talking about could possibly be the effects of the loading symbol not being fully loaded in time. You can try pre-loading the loading gif. Quote Link to comment Share on other sites More sharing options...
freelance84 Posted July 16, 2011 Author Share Posted July 16, 2011 ea thats what i thought it was... it happens on facebook too... i can only assume it loads the 1st frame but as the next isnt ready it jutters and so on untill all frames are loaded... I looked into preloading images before but without much success... is there a simple method for this? what would your thoughts be on writing a simple bit of js to rotate an image? Quote Link to comment Share on other sites More sharing options...
Alex Posted July 16, 2011 Share Posted July 16, 2011 I looked into preloading images before but without much success... is there a simple method for this? There are tons of tutorials for this, it's really simple. You can just google it and you'll get tons of results, but in general it'll be something like: var im = new Image(); im.src = 'imageToPreload.gif'; // ... what would your thoughts be on writing a simple bit of js to rotate an image? Unnecessary. Quote Link to comment Share on other sites More sharing options...
JasonLewis Posted July 18, 2011 Share Posted July 18, 2011 Does it matter that much that for a second or so the image may jitter when loading? This is pretty common in most web apps. I don't see the big deal, as next time the loading image appears it should appear straight away. Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted July 19, 2011 Share Posted July 19, 2011 The OP is correct. Chrome has poor GIF support. In July 2009 animated GIF's completely failed to load and show up. Now that's all patched up but the animations are always buggy and sometimes the animation do not repeat when you recreate a new element with a non-looping GIF animation. If you would like a bulletproof work around, you can create a png sprite image that is animated using some nice javascript. Please note that for most cases a simple GIF should suffice. HOWEVER, recenty (as in yesterday) I had to go the PNG sprite method because I required a non-looping GIF anaimation to show up numerous times in a page. Chrome caches the image and does not re-run the animation when a new instance of the GIF image is created in javascript. THus the requirment for me to use sprite images. Quote Link to comment Share on other sites More sharing options...
gizmola Posted July 19, 2011 Share Posted July 19, 2011 It also has to be pointed out that if people can do entire graph libraries in javascript, you could certainly do an animation that didn't require an image assets at all. Quote Link to comment Share on other sites More sharing options...
Philip Posted July 19, 2011 Share Posted July 19, 2011 It also has to be pointed out that if people can do entire graph libraries in javascript, you could certainly do an animation that didn't require an image assets at all. Yup, http://www.nikesh.me/blog/2010/05/ajax-style-loading-animation-in-css3-no-images/ is a pretty article about just using CSS3. Of course not all browsers support it... but yeah. Quote Link to comment Share on other sites More sharing options...
freelance84 Posted July 19, 2011 Author Share Posted July 19, 2011 Does it matter that much that for a second or so the image may jitter when loading? This is pretty common in most web apps. I don't see the big deal, as next time the loading image appears it should appear straight away. On a smart phone this is not the case... HTC Desire Z, Android 2.2.1 with the default browser. Tested a few different sites and the loading icon juttered and flicked around the 1st time, the 2nd and 3rd... This was done on some simple animated gif indicators i had made from scratch as well as on facebook and a few other big sites (the phone was not connected up to the wifi but using a good signal strength mobile network). It also has to be pointed out that if people can do entire graph libraries in javascript, you could certainly do an animation that didn't require an image assets at all. Yup, http://www.nikesh.me/blog/2010/05/ajax-style-loading-animation-in-css3-no-images/ is a pretty article about just using CSS3. Of course not all browsers support it... but yeah. Awesome but this is just CSS3 tho isn't it? What will happen with a non css3 browser? Quote Link to comment Share on other sites More sharing options...
JasonLewis Posted July 19, 2011 Share Posted July 19, 2011 It's also for webkit only browsers, Firefox is just shows icons. As for the mobile device, have you tested on any other devices? Different OS? Different browser for that phone perhaps? Quote Link to comment Share on other sites More sharing options...
freelance84 Posted July 20, 2011 Author Share Posted July 20, 2011 Not yet, but i think i am just going to see how big a small image is coupled with a few lines of js to rotate it first (more out of interest than anything else) Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.