Solution 1 :

With a quick look at your code it looks like all code is executed when the javascript-file gets loaded. This could be a timing-issue (your javascript-file is retrieved faster than your HTML-page: the elements it wants to act on are not available yet).

With jQuery you can quickly solve that by embedding your variables and functions in this holder:

$( document ).ready(function() {
    // place code here, the document is waiting

Because you are not using jQuery you could use this:

add the “defer” attribute.

<script type="text/javascript" src="scripts/loading.js" defer></script>

This should be enough, specs found here:

Or if you want only some functions executed when the document is loaded you could use the function which all browsers support:

(function() {
    // place code here, the document is waiting

Problem :

I made a loader that uses css and javascript to play an animation. On loading the site for the first time the animation sometimes doesn’t play leaving a blank white screen. I believe it has something to do with caching on the second load that makes it work. Thanks in advance.


    <section id="loading">
        <div class="circle spin"></div>
        <img src="src/j2.svg" alt="J2 Logo">
    <link rel="stylesheet" href="css/loading.css">
    <script type="text/javascript" src="scripts/loading.js"></script>



The websites link is