如何使用 bxSlider 加载 HTML 内容更顺畅
How to make loading of HTML content with bxSlider smoother
我的网站在 http://donoriolo.com/ 上线，我的 bxSlider 在首页上有 HTML 内容。
我的问题是，有一秒钟（或者比我的连接速度更慢，我敢肯定，）内容完全没有样式并且占据了整个 window，像这样：
即使在所有内容加载完毕后，离开页面并返回也只是一瞬间。
我尝试将我的 JS 放在头部而不是 body 的末尾，但没有成功。还有其他想法吗？ ...或者说忘记它并只使用滑块的图像会更好吗？
在不了解您的设置的情况下，我无法确定。但我的猜测是您使用 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 属性.
我的网站在 http://donoriolo.com/ 上线，我的 bxSlider 在首页上有 HTML 内容。
我的问题是，有一秒钟（或者比我的连接速度更慢，我敢肯定，）内容完全没有样式并且占据了整个 window，像这样：
即使在所有内容加载完毕后，离开页面并返回也只是一瞬间。
我尝试将我的 JS 放在头部而不是 body 的末尾，但没有成功。还有其他想法吗？ ...或者说忘记它并只使用滑块的图像会更好吗？
在不了解您的设置的情况下，我无法确定。但我的猜测是您使用 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 属性.