FLIR: avoiding ugly page loads

Question

I'm building a site that makes extensive use of FLIR to allow the use of non-websafe fonts. However, pageloads are an ugly process, as first the HTML text version of each field loads and then (a few hundred milliseconds later) it's replaced by its FLIR image counterpart.

Is there any way to avoid this sort of thing? I've got a client presentation in a few hours and I know it'll raise eyebrows. My situation is sort of related to this question which is in regards to sIFR, not FLIR. Any ideas?

Thanks,

Justin

Answer 1

It's been a while since I used FLIR, but I recall there was an internal caching method that would pull from cache on load instead of generate it each time.

http://docs.facelift.mawhorter.net/configuration:settings

Also, you can't have too many on the page at once. I found that between 6-10 were optimal for performance.

Are you on shared hosting? Is your css/js compressed? I found that the initial load was a little slow, but fairly quick after the images had been generated.

Answer 2

Try putting the following rules into your stylesheet:

.flir-replaced{text-indent:-5000px;}
.flir-image{display:block;}

You may have to modify your other FLIR-related CSS rules to account for the fact that the generated images are now vertically aligned to the top of their respective parents.