Home/ Questions/Q 6185731
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T01:45:58+00:00

I’m writing some code that will get executed before the DOM loads, basically, using

  • 0

I’m writing some code that will get executed before the DOM loads, basically, using Modernizr to get scripts. Now my issue is that I want to show a loading animation if the DOM loads and the scripts are still loading.

Modernizr is executed in the head. If I put the code to use document.getElementById in the head also, error is thrown because the DOM hasn’t loaded. Now I have no idea how to solve this.

Here is the code I have so far:

<head>
 <script>
     var FileManager = {
         IsLoading = false;
         LoadRequiredFiles: function (config) {
             config = config || {};
             this.OnLoading = config.onLoadingCallback;
             this.OnComplete = config.onCompleteCallback;
             this.IsLoading = true;
             if (this.OnLoading) {
                 this.OnLoading();
             }

             var self = this;
             Modernizr.load([{
                 load: '/jquery.min.js',
                 complete: function () {
                         if (self.OnComplete) {
                             self.OnComplete();
                         }
                         self.IsLoading = true;

                 }
             },
            ]);
         }
     };
     var globalLoadingId = 'globalLoader';
     FileManager.LoadRequiredFiles({
         onLoadingCallback: function () {
             document.getElementById(globalLoadingId).style.display = 'block';
         },
         onCompleteCallback: function () {
             document.getElementById(globalLoadingId).style.display = 'none';
         }
     });
</script>

I used to execute this code below the <body> tag, and it worked. Now I moved it into the <head>. So I used to pass 2 callbacks to it. Now I’d rather attach events to it and handle them in the body (assuming thats where the DOM is loaded).

What I’d like to do:

<head>
<script>
    FileManager.LoadRequiredFiles();
</script>
</head>

<body>
<script>

    //Bind the event, not sure if this is even possible in javascript.
    FileManager.OnCompleted += fileManagerCompleted;

    fileManagerCompleted()
    {
         document.getElementById(globalLoadingId).style.display = 'none';
    }

    if(FileManager.IsLoading)
    {
        document.getElementById(globalLoadingId).style.display = 'block';
    }
</script>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The page is your canvas for display. You can’t show anything before it loads. It sounds more like you want a very small page to load (quickly) where you could display your progress and then your code could dynamically load/display the rest of the page with ajax calls and javascript showing progress as it goes. That’s the only way to get out in front of the rest of the page load that I know of.

    • 0