Fatal编程技术网
  • javascript/
  • Javascript 隐藏正文，直到外部资源（异步加载）加载

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

javascript css angularjs

Javascript 隐藏正文，直到外部资源（异步加载）加载,javascript,css,angularjs,loading,Javascript,Css,Angularjs,Loading,因此，我有各种外部资源，如谷歌材料图标等，它们使用链接和脚本标签加载： <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=

因此，我有各种外部资源，如谷歌材料图标等，它们使用
链接
和
脚本
标签加载：

<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">
因此，当材质图标css仍在加载时，我可以在屏幕上以文本形式看到所有这些图标文本。而且，只有当css加载时，文本才会转换为图标形式。我将很快添加一个屏幕截图。

只需在页眉中为body标签添加显示：无：-

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


身体{
显示：无；
}
/*加载所有外部CSS和JS*/
$（文档）.ready（函数（）{
$（body.css（“显示”、“块”）；
})
它可能会帮助您。

编辑2

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

下面是Harsh代码的JS等价物（如果放在结束标记处）：

编辑1

delayedBy（ms）
由
的
onload
事件触发。你可以调整延迟

函数延迟时间（毫秒）{
setTimeout（'visible（）'，ms）；
}
函数可见（）{
var body=document.getElementsByTagName（“body”）[0]；
body.style.visibility=“可见”；
}
正文{
可见性：隐藏；
}

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

JAVASCRIPT

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

body {
    display:none;
}
使用此选项： 加载字体时将类输出到HTML标记，方法如下：

.wf-loading
.wf-active
.wf-inactive
.wf-<familyname>-<fvd>-loading
.wf-<familyname>-<fvd>-active
.wf-<familyname>-<fvd>-inactive
另外，您还可以通过js使用回调，看一看，它正在工作：当然，这只是一个非常基本的示例。

正如我提到的，没有jQuery。我在body标签的末尾加载JS。样式表字体总是在显示内容之前加载。事实上，人们正在努力寻找一种在加载字体文件之前显示内容的方法，这与你的问题相反……我编辑了这个问题，以解释为什么我希望它是我所问的方式。@TarunDugar作为对你编辑的回应，如果你的身体有
display:none
，
任何元素的可见性
都是一个模拟点。只要身体处于那种状态，它的孩子也会处于这种状态。是的，只要没有，就可以了。但是当它变得可见，而外部资源还没有加载时，我遇到了前面提到的问题。如果将其放在body的结束标记处，则不需要这样做。不起作用，文档被加载，但在body变得可见之后，外部资源仍然被加载（因为它是一个异步过程）。啊，异步，好，然后改为应用可见性：隐藏，并使函数超时以使身体返回。超时的时间是什么？如何知道何时加载外部资源？有没有一种方法可以让我回调一个完全加载的资源？请看更新，我必须对此进行研究。我的网站通过AJAX生成页面，1秒（1000ms）太快了。好的，非常感谢您的帮助！让我试试。谢谢，我去看看。 
.wf-loading
.wf-active
.wf-inactive
.wf-<familyname>-<fvd>-loading
.wf-<familyname>-<fvd>-active
.wf-<familyname>-<fvd>-inactive

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