Wait until content is fully loaded to start transition 'in'

[martifenosa]

The title says it all. Is there a way to not start the transition 'in' until the content is fully loaded?
Like, can I wait for the 'swup:PageView' event inside the 'in'.

Right now I find myself triggering the transition in just to watch the page finalize the loading when the fade ends.

Thanks! Lovin SwupJs even more than the css version ;) GJ
Works like charm with GreenSock

[gmrchk]

Yep, I also like the control swupjs gives you over regular "css" swup. But for some quick transition without any hard-core animations, swup is more than enough...

I'm guessing you mean waiting for assets like images to load, as the page (HTML) itself is loaded when the animation in is called.
swupjs does not have this option, and it won't actually, although I'm sure you could detect and do the waiting for the assets in the in animation on your own. However, as the animation is an enhancement of your static site, I would not recommend blocking the rendering in case the connection is slow, and just show the user "ugly" unfinished page, rather than nothing. Also, if you're testing on some development environment, production is in many cases much faster.

How about we go around it and try to preload as much as possible tho...

Defining assets that need to be preloaded for different URLs could help, so when the preload of some page starts, the preload of its assets can start as well. From what I see, browser preloads all images as soon as it gets the HTML from the server (for some unknown reason, as it is not yet rendered and shouldn't be parsed), but we could save some more time if a load of assets starts with preload if the page. This is only possible if the important assets (visible... assets in the upper part of the page) are defined by the developer.

We could also preload some assets as soon as the first load finishes. Those assets could include some images that are not on every page but are likely to be needed (like some image that are shared across most of the website).

From what I know, you can even make the browser prerender the page in the background, but that doesn't seem like a good option as you would need to be certain the user loads that page next, otherwise it's a lot of unnecessary processing power going to waist.

Any other ideas on some preload or other enhancements to make this issue less of an issue?

Btw, this could all be wrapped in a little swup plugin like this one, which I can make or further consult if you feel like giving it a try.

[martifenosa]

I'll keep thinking about it.

Thanks!