Cufon delay in Internet Explorer

Question

Does anybody have any idea why Cufon has a second delay upon loading the page in Internet Explorer (all versions) - http://www.consolidatemydebt.co.uk

I've got <script type="text/javascript"> Cufon.now(); </script> right before the closing </body> tag also.

Thanks

Answer 1

This is known bug for Cufon. Checkout Here.

Known bugs

Internet Explorer: should you not call Cufon.now() just before the closing tag, there might be a short, visible delay before the text is replaced.

Answer 2

The best way to prevent this flicker (which can also happen in Chrome/FF when the server connection is slow) is by hiding the cúfon text until it has been rendered.

Add document.documentElement.className = 'js'; just below your tag. This means we can target JavaScript enabled browsers by appending your CSS with .js before each selector.

In your CSS use this selector to temporarily hide content on page load, for example:

h1 { font-size: 2em; } .js h1 { text-indent: -9999px; }

Then in your JavaScript where you call cúfon include (this is assuming you are also using jQuery):

Cufon.replace("h1");
Cufon.now();  
$("h1").css("z-index","0"); 

What this does is hide the content until all your scripts have loaded and cúfon has run then shows the content.

You can also do this using z-index values.