Jump to content
L.Adlon

All of animated gif loaded before displaying in table?

Recommended Posts

Here's something I'm curious about... If I wanted to make sure an animated gif loaded all of its frames before being displayed (to avoid any pauses in the fps), would putting it in a table help (as my understanding is that a table's contents must first all be loaded before the table is displayed)?

 

If not, is there any other way I could assure that all the gif's frames are loaded before it is displayed?

 

 

Bonus question... If an animated gif is placed on the page with an <img> tag that has a title or alt attribute defined as something (say, "Welcome!"), would that be displayed before the first frame is loaded,... or before all the frames are loaded,.... or never? (unless the image was missing, or you are viewing it on a non-graphic browser)

Share this post


Link to post
Share on other sites

Sound like to me that the animated gif files are a bit heavy (big file size). If so, then of course it will lag. Anyway, not sure why you want to use animated gifs. It such old school. Either use jquery or create a video depending on what this gif file is about.As for the 'Welcome' alt tag, normally that gets displayed when either the image does not load or a person has his browser's setting to not show images.

Share this post


Link to post
Share on other sites

Sure, it's old school... but I'm not using it in the usual 'cheesy, unrelated anmiated character graphic floating on a page' kind of way. I'm using it as an alternative to a flash movie, for a (subtley) animated logo, or for an animated header background... both of which would normally be a still image (as opposed to video) anyway. Works great, and seems more compatible and less code heavy than Flash, plus, if the browser doesn't animate, it conveniently just displays the first frame, which is perfect.

 

I'm trying to make the gif as light as possible... Very low frame rate, short duration (about 1-2 seconds or so), minimum delta.

 

Still, it takes a finite amount of time to load, and (I believe) will start playing once it has SOME frames (not necessarily all), much like a .swf... so, you can run into problems with it starting before it's all loaded. So, that's why I'm trying to see if there's some means (be it official or hack) to hold back the display of the gif until it's fully loaded.

 

 

That all said, would putting it in a table do the trick?

Share this post


Link to post
Share on other sites

Tables might help but I have to say that I have not used animated gifs in about 7 years so I could not tell you if that will resolved your problem or not. You might google it. Also, there might be an alternative using jquery or something.

Share this post


Link to post
Share on other sites

Ya, the jquery stuff (and scripting in general) is a bit out of my element. Trying to keep it simple (...and understandable to myself).

 

I would normally be teaching myself jquery and scripting overall, but I just have a million other things to do (...as I teach myself just about every other thing!).

 

 

The theory is fairly sound though, don't you think? Table elements have to load first before being displayed?

Share this post


Link to post
Share on other sites

What have you tried? There should be several simple things you could try. For example style the gif as invisible and then use the onload event of the window or the file itself to change the style to visible.

Share this post


Link to post
Share on other sites

The only thing I've tried is putting it in a single cell table (again, with the assumption that it wouldn't be displayed until fully loaded, due to it being in a table)... and I tried some preloader coding I found.

 

The onload event thing sounds interesting. I'm not familiar with it, though. Is that javascript? I'm trying to avoid (or at least minimize) the javascript use... partially out of fear of compatibility (people having it disabled)... and partially because I'll probably not know how it works, so it'll be a nightmare if something needs to be altered or something goes wrong.

 

So far, though, the graphic seems to pop in pretty fast... maybe even instantly, in most cases. (Or, perhaps the 'display when it's loaded' theory is working, and it is actually being held off until it loads... Either way, it's working nicely... The rest of the screen doesn't tend to display without the graphic, so it's either loading nice and fast, or it's holding off on displaying ALL of the screen until it's all loaded.)

 

The image is by no means huge, but it's certainly not your usual 10 frame postage stamp sized thing. It's a full size header (900x100 or so), and probably about 120 frames! It's about 1.4mb.

 

I may experiment with a video version of it. As long as it's equal or smaller in file size, and is fully compatible and doesn't require too many hoops to be jumped through, I may replace the animated GIF with that. But, the GIF is working very well.

Edited by L.Adlon

Share this post


Link to post
Share on other sites

One thing I'm curious about... I've found one suggested 'preload' method on the Net:

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px

...but, what I'm wondering is this... If the images loaded using this method are all present on the first page, is this method doing anything, or is it redundant? Does it actually serve to do something different than just having the images on the page? Does it cause the images to load before the page is displayed?

 

I can see something like this working to load images needed for OTHER pages (without displaying them) while the visitor is viewing the first page... but if all the images are on the first page, does this kind of method serve a purpose?

 

(I'm not saying I argue the logic of the method, as I'm not entirely sure how it works and what affect it has as a result... I'm assuming it just loads the image, but displays it 'offscreen'. I'm just curious...)

Edited by L.Adlon

Share this post


Link to post
Share on other sites

Consider something like a slideshow. If you don't preload the images then the slideshow will probably not operate in a smooth manner.

Share this post


Link to post
Share on other sites

Ya, I get the whole concept of preloading... I'm just wondering if the concept of the code I showed there only serves to load images (and not display them)... and if that's the case, I just wanted to verify that unless you are loading images that will appear 'later' (on another page, or images that are currently hidden or next in line to be showed in a slideshow or whatever), the method will be redundant and pointless. If the images are on the first page, preloading them would serve no purpose, and would be the same effect as simply having them on the page, as far as load+display order and speed.

 

Just trying to verify my understanding of how it works and what affects it has.

Edited by L.Adlon

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...