Search code examples
javascriptjqueryhtmlcsspreload

Preload whole page

I would like to preload everything before HTML even starts displaying.

The problem is with loading external fonts, images etc.

I was trying to make simple jquery function with:

CSS:

html { display:none; }

jQuery:

$(window).load(function() {
  $('html').css('display', 'block');
});

But that doesn't really work.

The main reason that I want to preload is that I have font animation on the page start and when the font isn't loaded and CSS animation is fired it looks a little buggy.

Solution

  • load() as a shortcut for on('load') is deprecated:

    Try using 

    $(window).on('load', function() {
  $('html').css('display', 'block');
});