Question

所以，我有各种外部资源，如谷歌素材图标等，使用link和script标签加载：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

如果所有这些资源（通过body和link加载）完全加载，我该如何隐藏script？我可以使用自定义指令吗？而且，我不使用jQuery 。

修改

我想要的原因是谷歌的材料设计图标包含在以下方式中：

<i class="material-icons">
    visibility
</i>

所以，虽然材料图标css仍然在加载，但我可以看到所有这些图标文字，＆＃39;可见性＆＃39;在我的情况下在屏幕上的文本形式。而且，只有当css加载时，文本才会转换为图标形式。我很快就会添加截图。

Answer 1

只需在标题中为body标记添加display：none： -

<html>
    <head>

        <style>
            body{
                display: none;
            }
        </style>

        /* Load all your external CSS and JS */
    </head>
    <body>

        <script>
            $(document).ready(function(){
                $(body).css("display", "block");
            })
            </script>
    </body>
</html>

它可能对你有帮助。

Answer 2

修改2

OP有关加载外部脚本的问题可能需要使用async和defer属性进行进一步测试。以下链接将有助于实现这一目标：

这是相当于Harsh代码的JS等价物（如果放在结束</body>标记处）：

编辑1

delayedBy(ms)由onload <body>事件触发。你可以调整延迟。

function delayedBy(ms) {
  setTimeout('visible()', ms);
}

function visible() {
  var body = document.getElementsByTagName("body")[0];
  body.style.visibility = "visible";
}

body {
  visibility: hidden;
}

<body onload="delayedBy(1000);">
  <h1>Here I am!</h1>

</body>

Answer 3

在CSS中隐藏您的身体，并在触发事件DOMContentLoaded时显示它

<强> JAVASCRIPT

Array

<强> CSS

  document.addEventListener("DOMContentLoaded", function(event) {
     document.body.style.display = 'block';
  });

Answer 4

使用此：https://github.com/typekit/webfontloader 在加载字体时会将类输出到HTML标记，这样：

.wf-loading
.wf-active
.wf-inactive
.wf-<familyname>-<fvd>-loading
.wf-<familyname>-<fvd>-active
.wf-<familyname>-<fvd>-inactive

你可以用html＆gt;做任何事情。对于任何其他标签，例如身体，所以：

.wf-loading body{display:none;}
.wf-active body{display:block;}

你也有通过js使用的回调，看看，它的工作原理：http://fiddle.jshell.net/m2d6k8er/当然这只是一个非常基本的例子。

隐藏正文，直到外部资源（异步加载）加载

4 个答案: