Re: [css3-fonts] rethinking font load events

On Fri, Sep 7, 2012 at 1:11 AM, Sebastian Zartner
<sebastianzartner@gmail.com> wrote:
>> You do some work in function A.  A may or may not incidentally kick
>> off some font loads (for example, it might insert some DOM nodes that
>> get a 'font' property applied for a new font that hasn't been loaded
>> yet).  You'd like to execute an additional function B, but if there
>> are pending font loads, delay B until after they're finished (for
>> example, B might do some measurements which will be affected by font
>> metrics).
>>
>> Normally, you'd have to do this by adding some code to the end of A
>> that (1) does a style flush (an ill-defined operation) so that any
>> font loads that would be triggered by A's work are definitely started,
>> (2) check FontLoader.readyState, (2a) if it's "idle", assume your work
>> didn't trigger any font loads and call B immediately, (2b) if it's
>> "loading", set up a listener for allcomplete that runs B.
>>
>> notifyAfterCompletion() lets you avoid some of these steps.  At the
>> end of A, all you have to do is set up a listener for "allcomplete"
>> that runs B, then call notifyAfterCompletion().
>
> Sorry, but I still didn't understand the need for notifyAfterCompletion().
> As you say "allcomplete" will always be fired when all fonts are
> loaded, which the page currently needs. So if B is doing some
> measurements being affected by font metrics, all you have to do is to
> set up a listener for "allcomplete" and call B in it. If A then
> triggers new fonts to be loaded, "allcomplete" will be fired as soon
> as they are, which calls B. If A didn't trigger any new fonts to be
> loaded, B won't be executed again.
>
> Maybe the misunderstanding lies in when "allcomplete" is actually
> triggered. So I assume you wouldn't trigger it if there are just
> client fonts used in the page, i.e. B would not be executed at all.
> I interpreted the event to mean "all fonts are loaded and displayed",
> independent of having web fonts in the page or not. So the event would
> always at least be fired once.

If there is at least one @font-face being used, yes, "allcomplete" is
guaranteed to fire at least once.

However, that's irrelevant for the question at hand.  Assume that A is
running some time *after* the page load, so at the time A starts,
FontLoader.readyState is definitely "idle".  You picked up on the
problem - if all you do is set up B to run on an "allcomplete" event,
but A didn't actually trigger any new loads, B will never run at all.
That's the problem we're solving here.  Without notifyAfterCompletion
or something similar (like an explicit promise object), you have to do
an annoying amount of additional work, which depends on style
flushing.

~TJ

Received on Friday, 7 September 2012 15:38:54 UTC