Question

我的网站是http://donoriolo.com/的实时网站，我首页上的bxSlider包含HTML内容。

我的问题是，有一秒（或者更糟糕的是连接速度比我的慢，我确定），内容完全没有样式并占据整个窗口，如下所示：

即使在加载完所有内容后，离开页面并返回它也会暂时发生。

我试着把我的JS贴在头部而不是身体末端，但没有运气。还有其他想法吗？ ...或者说忘记它并仅使用图像作为滑块会更好吗？

Answer 1

如果不了解您的设置，我无法确切知道。但我的猜测是你使用JavaScript来初始化http://donoriolo.com/js/script.min.js中的滑块。

因为这个脚本是在您的内容（DOM）之后加载的，所以它暂时看起来没有样式。

如何解决这个问题？

嗯，最简单的方法是在内容之前加载脚本。这可以通过将脚本标记移动到<head>而不是<body>的结尾来完成。通过脚本标记我的意思是当然：

<script src='/js/script.min.js' charset="utf-8"></script>

这会带来以下问题，在脚本加载之前，您的网站不会显示。这可能不是一个大问题，但连接速度较慢的访问者（包括大量移动访问者）会注意到页面加载速度缓慢。这对于SEO也是有问题的。

我会做的是隐藏滑块：

...
<div class="bxslider" style="display: none">...</div>
...

在脚本运行后再次显示它，所以在script.min.js末尾的某个地方你会有：

$('.bxslider').show();

您可能希望使用一些精美的动画来扩展它，例如使用opacity而不是display属性。