0

I have created an animation in Adobe Animate, which I want to use as a preloader. The output of this animation is a script & style (which I put in the head) and some elements (divs) which are in the body right after the body tag.

What triggers the script is the onload="init()"; attribute placed inside the body tag. The problem I have with this is that the animation starts just after the whole body (including the content - for which I created the preloader in the first place) is loaded. So I think the script in the head runs just after the body loads.

So my question is how can I trigger the script after the first div with the animation elements is loaded so the animation could run while the rest of the content is loaded? - so basically to act like a preloader.

This is the structure.

<html>
<head>

   <link rel='stylesheet' href='...preloader-animation.css' type='text/css' media='all' />
   <script type='text/javascript' src='...preloader-animation.js'></script>

</head>

<body onload="init()";>

   <div id="animation_container">
      ...animation elements...
   </div>

...rest of the content (images, video, etc. not markup)

</body>
</html>

I've also tried to place the trigger below the animation div like this

<script type="text/javascript">
   window.onload = function() {
      init();
   }; 
</script>

or

<script type="text/javascript">
   document.onload = function() {
      init();
   }; 
</script>

but it's still waiting for the whole page to load before playing.

Thanks

labilouser
  • 177
  • 1
  • 2
  • 9
  • If the rest of the content is in the markup, it's part of the very first request. When you say content, do you mean markup, or images etc? – speciesUnknown Sep 01 '20 at 10:40
  • I mean images, videos, and heavier elements. – labilouser Sep 01 '20 at 10:41
  • In theory what you have is correct, unless that script depends on the div to exist. What happens if you put a script just after #animation_container to start the preload animation? – speciesUnknown Sep 01 '20 at 10:53
  • Please have a look at the revised question. I've omitted an important aspect out, maybe it makes more sense now. Also, to answer your question, I've tried to place the trigger for the script right below the #animation_container and also to put the whole script below the #anim... but it's doing the same - waiting for the whole page to load, and then plays the animation. – labilouser Sep 01 '20 at 13:42
  • Does the answer from [How to render the html only after the whole content has been downloaded](https://stackoverflow.com/questions/62681479/how-to-render-the-html-only-after-the-whole-content-has-been-downloaded) solve your problem? – Carlo Corradini Sep 01 '20 at 13:52

0 Answers0