Question

因此，如果用户无法使用javascript，我有一个我已经设计并使用css功能的网站。问题是我使用jQuery进行了进一步的样式更改，并将一个外部样式表附加到＆＃39; head＆＃39;。

现在，当页面加载时，可以看到样式更改一瞬间，但它使页面看起来非常紧张（因为某些样式更改很大）。我不希望我的用户看到这种紧张的负载，并希望我能做些什么来隐藏页面/提供平滑过渡，如果jQuery在样式更改期间稍后响应（慢速连接）。

任何反馈都将不胜感激！：）

Answer 1

解决问题的一种方法是不通过javascript添加CSS，而是像往常一样将其包含在CSS链接中。对于仅针对启用了javascript的设备的样式表，只需添加一个由javascript添加的body类。像这样：

JavaScript样式表

body.js header { display: block; }
body.js footer { display: block; }
body.js .my_jsmenu { display: block; }
body.js .etc { display: block; }

<强>标记

<head>
    <!-- normal stylesheets -->
    <link href="styles.css" type="text/css" rel="stylesheet" />

    <!-- js stylesheet -->
    <link href="myjs_styles.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <script type="text/javascript">
        document.body.className += ' js';
    </script>

你也可以使用html标签作为很多其他引擎，例如modernizr do。如果你使用较少或sass为你的css这个过程大大简化，但如果你不是那么它可能有点乏味。

就个人而言，我避免使用这些禁用javascript的解决方案。任何在此时禁用javascript的人都故意禁用并且知道他们不会获得适当的体验。我们过去常常在2000年代做到这一点，但我想说在2011年左右，它甚至不值得考虑。

对于jQuery调整样式，请确保您的CSS涵盖初始加载。您可以使用您的jQuery根据用户交互或设备调整大小/滚动/查看状态进行调整，但是如果在javascript运行完毕之后它没有正确呈现，您的网站将会陷入搜索引擎优化。查看Google Page Speed Insights以正确分析您的UX及其加载配置，以获取更多详细信息。

Answer 2

如果您想使用加载div，另一种方法如下：

普通CSS（未检测到JS）

#loading { display: none; }

Javascript CSS

#loading {
    display: block; position: fixed; width: 100%;
    height:100%; top:0; left:0; background-color:#fff;
    z-index: 100; /* must be higher than all other z-indexes on your page */
}

<强>标记

    <!-- End of DOM -->
    <div id="loading">
        <p>Loading message or ajax loading gif here</p>
    </div>
    <script type="text/javascript">
        (function($) {
            $(document).ready(function() {
                setTimeout(function() {
                    $('#loading').fadeOut();
                }, 2500); // Timeout will need to be adjusted based testing the page with various connection speeds for a balance that suits your target user. Chrome dev tools can help with this
            });
        })(jQuery);
    </script>
</body>
</html>

以上是一种简化的方法。您可以将功能转换为可以在需要时重复使用的功能，但这是您如何实现它的要点。没有简单或可靠的方法来检测用户的速度，因此如果您必须使用该站点来查看在不同连接速度下最有效的方法，以获得平衡的超时。这不是IMO的首选方法，但如果您想使用加载屏幕，这应该会给您一个很好的跳跃点。

如果您的目标受众加载速度足够慢，以至于在加载屏幕显示速度不够快之前UI显示，您可以将加载div移动到您身体的开口处;请记住，对于IE8及更早版本，z-index值无关紧要。任何位于DOM后面的位置相对或绝对的元素都将呈现在它之上。

Answer 3

感谢您的所有反馈。经过一些思考和实验，我发现了一些我更喜欢javascript检测或加载屏幕的东西。

我决定做的是设计网站，希望jQuery能够正常工作，然后在底部添加一个安全样式表，当jQuery和/或javascript不可用时，它会规范化并创建稳定的样式。

在我的所有脚本标签（正文底部）之后，我将此代码放在它下面。

<span id="removeMe">
        <script>$('#removeMe').remove();</script>
        <link rel="stylesheet" href="css/safety.css">
        <script>alert('There is a problem with jQuery');</script>
</span>

如果jQuery处于脱机状态，安全表将显示，javascript将提醒问题。
如果javascript离线，它仍会保留安全表。

注意：请注意，如果仅使用干扰安全性CSS的纯javascript进行任何样式更改，您可能需要为该方案添加另一个范围。

使用jQuery安全地重新设置页面具有难看的负载外观

3 个答案: