在 AngularJS 1.x 中的文件之前加载图像

Question

在 index.html 页面中，我在加载文件的所有标签之前放置了一个 .gif。然后，使用 JQuery，我删除了那个加载程序。但它没有用。显示了一个空白页面，因为它正在等待加载一些 .js 文件。因此，我创建了一个动态加载文件的脚本。

这是 html 代码：

<!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>

现在，问题是页面首先加载所有 css 文件，然后是 angular.min.js，然后是我的 gif，然后是其他文件。为什么？我怎样才能立即加载 gif 并突然加载所有其他文件？

谢谢！

Answer 1

试试这个

<!--Put this in head tag-->

<link rel="preload" href="link-to-image">
...
<img src="link-to-image">

Answer 2

html 解析器在等待 css 和 js 文件加载时被阻止。解决方法是异步加载样式表和脚本文件。对您在 <head> 中加载的所有文件执行以下操作，包括 table.min.css、ng-img-crop.css 和 angular.min.css。

对于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>

对于 js:

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

有趣的事实：Google 实际上会惩罚在等待资源时阻止解析器呈现元素的网页。

在 AngularJS 1.x 中的文件之前加载图像

Load an image before the files in AngularJS 1.x

html

javascript

jquery

document-body

angularjs