Knowing when resources are loaded is a key part of building functional, elegant websites. We’re used to using the
DOMContentLoaded event (commonly referred to as “domready”) but did you know there’s an event that tells you when all fonts have loaded? Let’s learn how to use
document.fonts object features a
ready property which is a Promise representing if fonts have been loaded:
// Await all fonts being loaded await document.fonts.ready; // Now do something! Maybe add a class to the body document.body.classList.add('fonts-loaded');
Font files can be relatively large so you can never assume they’ve loaded quickly. One simply
document.fonts.ready gives you the answer!
Spatial navigation is the ability to navigate to focusable elements based on their position in a given space. Spatial navigation is a must when your site or app must respond to arrow keys, a perfect example being a television with directional pad remote. Firefox OS TV apps are simply…