Question

我正在编写一些代码，这些代码将在DOM加载之前执行，基本上，使用Modernizr来获取脚本。现在我的问题是，如果DOM加载并且脚本仍在加载，我想显示加载动画。

Modernizr在头部执行。如果我也将代码放在头部使用document.getElementById，则会抛出错误，因为DOM尚未加载。现在我不知道如何解决这个问题。

这是我到目前为止的代码：

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

我过去常常在<body>标记下面执行此代码，但它确实有效。现在我把它移到了<head>。所以我过去常常传递2个回调。现在我宁愿将事件附加到它并在正文中处理它们（假设这是加载DOM的地方）。

我想做什么：

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

Answer 1

该页面是您要显示的画布。在加载之前，您无法显示任何内容。这听起来更像是你想要一个非常小的页面加载（快速）你可以显示你的进度，然后你的代码可以使用ajax调用动态加载/显示页面的其余部分，javascript显示进度。这是在我知道的其余页面加载之前退出的唯一方法。

Answer 2

运行操作DOM的脚本的唯一完全可靠的方法是使用body onload事件。（window.onload很受欢迎，但不是100％可靠。）

有些浏览器实现了一个onDocumentReady事件，它可以在IE中伪造，但我不建议使用它。

Answer 3

使用 getElementById 本身不会在头部使用时抛出错误。您可能导致错误，因为您没有检查返回的值，如果找不到具有指定ID的元素，则 null ，例如

var el = document.getElementById('foo');

if (el) {
  // do somethig with el
} else {
  // el wasn't found
}

您的问题是如何仅在脚本仍在加载且页面可见时才显示图像。简单的答案是不要使用客户端脚本加载，在服务器上执行此操作。： - ）

如果要继续加载脚本，请在加载图像中添加一个类，例如“hideOnLoad”。从最后一个脚本加载回调，将规则设置为“display：none”（只需使用脚本创建并添加带有该规则的样式表）。

现在你只需将加载图像作为主体中的第一个元素包含一个“hideOnLoad”类，知道当脚本加载完成后，它们将隐藏图像，无论它是否（或任何其他具有相同类的元素））当时是否存在。

编写自定义javascript事件

3 个答案: