Question

所以我有一些动画需要在页面内容出现之前发生。

我使用JS来隐藏我希望在加载时出现动画的div，但是因为脚本文件是在HTML之后调用的，所以div出现，当JS发生时消失，然后出现再次与动画。

我的问题是，当我把脚本文件放在开头时，隐藏不会发生，可能是因为它的目标尚未存在。

有没有办法可以先加载jQuery文件，然后在div存在但是在它们完成加载之前隐藏它们？

PS：如果我使用css隐藏div，它在javascript被禁用时不会工作，这是一个问题，如果我只是使用JS来切换类，我有同样的延迟问题，它看起来很奇怪...

Answer 1

使用I.devries给出的here技术，您可以在可以插入HTML文件顶部的脚本块中添加带有Javascript代码的CSS样式：

<script type="text/javascript">
    var style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = '.hiddenDiv { display: none; }';
    document.getElementsByTagName('head')[0].appendChild(style);
</script>

通过将类应用于div，它们将在加载后立即隐藏：

<div class="hiddenDiv" ... ></div>

如果禁用Javascript，则不会添加样式并显示div。

首先加载脚本文件，在加载前在div上执行

1 个答案: