Question

因为我的网页有点重，所以我决定使用预加载器。预加载器的目的是在主要内容加载之前显示一些内容，从一开始就吸引用户。因此，尽快显示预加载器非常重要。

但是有一个小问题。在尝试显示和呈现HTML之前，浏览器通常会等待加载所有CSS。如果文档包含几个大的样式表，这可能会有问题。

所以，我的解决方案是：

<!-- In the head: -->
<noscript>
<link rel="stylesheet" href="/big-css1.css">
<link rel="stylesheet" href="/big-css2.css">
<link rel="stylesheet" href="/big-css3.css">
</noscript>
    <script>
        function LoadCSS(path) {
            var head = document.getElementsByTagName('head')[0],
                link = document.createElement('link');
            link.setAttribute('href', path);
            link.setAttribute('rel', 'stylesheet');
            link.setAttribute('type', 'text/css');
            head.appendChild(link);
        }
    </script>
<style>
/*preloader CSS is here*/
</style>

...
</head>
<body>
<div id="preloader">
Some nice content here
</div>

<!-- Main content starts below: -->
<div id="wrapper">
<script>
//hide main content until its loaded
//use JS and not CSS to support those with JS disabled
var el_preloader = document.getElementById("preloader");
var el_wrapper = document.getElementById("wrapper");
el_preloader.style.display = "block";
el_wrapper.style.display = "none";
LoadCSS('/big-css1.css');
LoadCSS('/big-css2.css');
LoadCSS('/big-css3.css');
</script>
...

<!-- After jQuery has been loaded -->
<script>
jQuery(window).load(function() {
    document.getElementById("wrapper").style.display = "block";
    jQuery('#preloader').fadeOut(1000, function () {
        jQuery('#preloader').remove();
    });
});
</script>

所以，基本上，如果用户支持JavaScript，那么JavaScript会处理样式表的加载，如果关闭了JS，那么<noscript>标记内的东西就会被解析，因此样式表会正常加载。

这种设置在现代浏览器中运行良好，但我不确定它会对SEO产生什么影响，考虑到谷歌和其他人现在正在评估网站上的用户体验，为此他们需要解析CSS。他们是否足够聪明，可以使用此解决方案正确呈现网站？一般情况下，预装者对搜索引擎优化有任何不利影响吗？

感谢。

使用JavaScript的CSS样式表动态加载的SEO影响

0 个答案: