How to wait for page to load befor Reveal.js starts

Question

I have a short reveal.js presentation hosted here on GitHub pages.

I want to wait for the page to fully load before auto-starting the presentation. If the connection is slow, awesomefonts don't get rendered in time, and the user can only see an empty block.

Is it possibile to wait some time before start?

Possible duplicate of [Execute Javascript When Page Has Fully Loaded](http://stackoverflow.com/questions/1033398/execute-javascript-when-page-has-fully-loaded) — mariocatch, Dec 27 '15 at 14:23

score 0 · Answer 1 · answered Dec 27 '15 at 14:37

Okay, so after a minute of browsing your code, I noticed that you probably need an onload block in your script before initializing Reveal.js. Try putting the

Reveal.initialize({
      controls: false,
      progress: true,
      history: true,
      center: true,
      autoSlide: 2200,
      transition: 'slide', // none/fade/slide/convex/concave/zoom
      // Optional reveal.js plugins
      dependencies: [
      { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
      { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
      { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
      { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
      { src: 'plugin/zoom-js/zoom.js', async: true }
      ]
      });

Inside of:

object.onload=function(){myScript};

Hope this helps. The presentation looks great btw.

I tried with but it still get's loaded before awesomefonts are ready. — Angelo, Dec 27 '15 at 16:15
hmm... so it appears AwesomeFonts loads asynchronously. Can you link me to the api you're using? — Andrew Robinson, Dec 27 '15 at 18:28
Which api ? I am loading them via https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css — Angelo, Jan 08 '16 at 19:05
This: http://stackoverflow.com/questions/4383226/using-jquery-to-know-when-font-face-fonts-are-loaded may be of consequence to you — Andrew Robinson, Jan 08 '16 at 22:45

score 0 · Answer 2 · answered Mar 29 '16 at 14:48

put your init code inside window.onload() function

if you need multiple things to be loaded asyncronously, just create a myLoad() function and a objToBeLoaded counter, then each time an obj has loaded, make it call somethingHasLoad() function that will check for that counter and eventually call myLoad()

score 0 · Answer 3 · answered Jul 21 '23 at 01:04

Reveal has a ready event, which fires when the content is loaded. Implementing the Reveal eventlistener function with the string 'ready' as the first argument and a function to be executed which holds your code should do the trick:

Reveal.addEventListener('ready', function () { your code here });

How to wait for page to load befor Reveal.js starts

3 Answers3