Making IE Behave Without Cufon.now()

[Richard Fink]

The FOUC (Flash Of Unstyled Content) that is prevented in IE by
inserting:
<script>Cufon.now();</script>
as the last tag of body...

Can be avoided by supressing the visibility of the page until the faux
IE "DOMContentLoaded" event fires and Cufon runs.
Amending the function that fires on line 39 of the current Source code
like this will do it:

if (document.readyState && document.createStyleSheet) (function() {
var docELRS=document.documentElement.runtimeStyle, p='visibility';
docELRS[p]='hidden';
try {
document.body.doScroll('left');
perform();
docELRS[p]='visible';
}
catch (e) {
setTimeout(arguments.callee, 1);
}
})();

Performance-wise, you can't tell the difference.

For surety - and smooth migration while it gets tested fully in Cufon
- I would suggest making it a conditional option of some sort. (I
think it's wise to preserve the "last tag" option to trigger
DOMContentLoaded just in case. Integrating script that does styling
changes into a long, busy page with lots of other script can be
murder. The more tools the better.)
Something like: if (Cufon.Suppress) docELRS[p]='hidden';
And then just add Cufon.Suppress=true; before Cufon.replace() is
called.

Kick it around, test it out, modify and integrate as you will.

It will certainly work for most pages. (Actually, I've never seen it
fail on it's own, without being a part of a script that bangs heads
with another script, yet.)
I've used and tested it extensively with other script that also
affects styling on page load in IE.
(BTW - The bracketed notation for the ''visibility" property is just a
habit. Certainly not necessary.)

Regards,

Richard Fink

[Richard Fink]

Oops. There seems to be a problem with it in IE8 standards mode. IE7
compat works fine.
Looking into it.

Rich

[Sorccu]

Hi Rich,

That's certainly an interesting approach! It would require quite a bit
of real-world testing though, from my experience even doScroll() may
sometimes (mainly when the page is very complicated) decide to wait
for some things to load. But it would definitely be interesting to see
if we could come up with a fool-proof enough solution (and one that
works in IE8 as well).

Simo

[Richard Fink]

Simo -

The more I work with what you've done, the more excited I get. Amazing
that this capability was just hiding in plain sight waiting for
someone to work out the details in a designer-friendly fashion.

Beautiful job so far. Keep going and don't let anything get in the
way!

That said, back to avoiding FOUC in IE as gracefully as possible ...
For now - and it's working for IE8 Standards, too - I've taken the
Cufon.now() statement out of the body and into the head along with the
other Cufon related script by adding a script element with a defer
attribute within an IE conditional comment.
Like this:
<!--[if IE]>
<script type="text/javascript" defer="defer">Cufon.now()</script>
<![endif]-->

So far, working like a charm. This is, at least to me, a bit more
elegant than having to split things up and invade the body of every
page.

Now, my understanding is that using a script tag with the defer
attribute is a very common way of creating a DOMContentLoaded event in
IE. And is used within libraries all the time.
Commonly attributed to Dean Edwards, Matthias Miller, and John Resig.
Summed up at: http://dean.edwards.name/weblog/2006/06/again/

And it looks like this:

// for Internet Explorer (using conditional comments)
/*@cc_on @*//*@if (@_win32)
document.write("<script id=__ie_onload defer src=javascript:void(0)><\/
script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() { if (this.readyState ==
"complete") {
init();
// call the onload handler }};
/*@end @*/

And if this is the case, if someone is using Cufon in conjunction with
a library, it would seem to make sense to call Cufon.now() - if that
fixes the FOUC problem - upon the firing of the DOMready event
provided by the library. (Just a thought - haven't tested.)

(BTW - I might be pointing out something here that you've considered
and discarded for one reason or another - but I have no way of knowing
what you do or don't know. And I'll tell you right now that you're a
better object-oriented coder than me!)

Gotta go and get other stuff done now but I'll be keeping track of
this group carefully.

Thanks again for the great work.

Richard Fink

> >> Richard Fink- Hide quoted text -
>
> - Show quoted text -

[_simps_]

Testing: Cufon call at the very end of the cufon.js file

[…]
return wrapper;
};
})());

Cufon.replace('h1', {
hover: true
});

Case 1: cufon.js unchanged
Still get FOUC in IE

Case 2: switching to the defer method
Apparently no more FOUC

// if (document.readyState && document.createStyleSheet) (function() {
// try {
// document.body.doScroll('left');
// perform();
// }
// catch (e) {
// setTimeout(arguments.callee, 1);
// }
// })();

/*@cc_on @*/

/*@if (@_win32)
document.write("<script id=__ie_onload defer src=javascript:void(0)><\/
script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (this.readyState == "complete")

perform();
};
/*@end @*/

Simp's

[Simo Kinnunen]

Hi Simp's,

You could also have used Cufon.now(). The <script defer> trick may or
may not work in all cases, which is why it will not be used until have
have tested it thoroughly. Good to hear that it worked for you, though!

Simo

[_simps_]

Thanks Simo, hadn't even noticed that Cufon.now() was a different
thing from Cufon.replace() …

What apparently works for me:
- a modifed cufon.js as above with the defer instead of the
document.body.doScroll('left');
- in an external js, the following in the global init function which I
call via a defer method for IE, based on the Dean Edwards & co script

function init() {
…

Cufon.replace('h1', {hover: true});

Cufon.now();
…
}

Simp's