Search code examples
javascriptjqueryhtmlangularjsdocument-body

Load an image before the files in AngularJS 1.x

In the index.html page I put a .gif before all the tags that laod the files. Then, with JQuery, I removed that loader. But it didn't work. A blank page was shown, because it was waiting for load some .js files. So, I created a script that load the files dynamically.

This is the html code:

<!doctype html>
    <html ng-app="myApp">
        <head>
         ...here I'm loading all css files
        </head>
        <body>
            <!-- This is the loader -->
            <div id="loader" style="background:url('URL_IN_BASE_64')"></div>

            <div ng-cloak ng-controller="MyAppController">
                <div ui-view></div>
            </div>

            <script>
                (function () {
                    var fileList = [
                        "vendor/angular/angular.min.js",
                        "vendor/jquery/jquery.min.js",
                        "vendor/angular-aria/angular-aria.min.js",
                        ....
                    ]

                    function loadScripts(index) {
                        return function () {
                            var e = document.createElement('script');
                            e.src = fileList[index];
                            document.body.appendChild(e);

                            if (index + 1 < fileList.length) {
                                e.onload = loadScripts(index + 1)
                            } else {
                               var loader = document.getElementById("loader");
                                if (loader) {
                                    loader.remove();
                                }
                            }
                        }
                    }
                    loadScripts(0)();
                })();
            </script>
        </body>
    </html>

Now, the problem is that the page first loads all the css files, then angular.min.js, then my gif, and then the other files. Why? How can I immediatly load the gif and, suddently, all other files?

enter image description here

Thank you!

Solution

  • The html parser is being blocked while waiting for your css and js files to load. The work around is to load your stylesheets and script files asynchronously. Do the following for all files that you load in your <head>, including table.min.css, ng-img-crop.css, and angular.min.css.

    For css:

    <link rel="stylesheet" href="css/styles.css" media="wait" onload="if(media!='all')media='all'">
<noscript><link rel="stylesheet" href="css/styles.css"></noscript>

    For js:

    <script async src="js/main.js"></script>

    Fun fact: Google will actually punish web pages that block the parser from rendering elements while waiting for resources.