Javascript 使用jQuery安全地重新设置页面的样式会出现不好的加载外观
所以我有一个网站，我用css设计并使其功能化，以防用户无法使用javascript。问题是我使用jQuery进一步更改了样式，并在“head”中附加了一个外部样式表 现在，当页面加载时，可以在一瞬间看到样式更改，但这会使页面看起来非常不稳定（因为某些样式更改很大）。我不想让我的用户看到这种不安的负载，我想知道我可以做些什么来隐藏页面/如果jQuery稍后在样式更改期间响应（连接速度慢），我可以提供一个平滑的转换Javascript 使用jQuery安全地重新设置页面的样式会出现不好的加载外观,javascript,jquery,html,css,Javascript,Jquery,Html,Css,所以我有一个网站，我用css设计并使其功能化，以防用户无法使用javascript。问题是我使用jQuery进一步更改了样式，并在“head”中附加了一个外部样式表 现在，当页面加载时，可以在一瞬间看到样式更改，但这会使页面看起来非常不稳定（因为某些样式更改很大）。我不想让我的用户看到这种不安的负载，我想知道我可以做些什么来隐藏页面/如果jQuery稍后在样式更改期间响应（连接速度慢），我可以提供一个平滑的转换 任何反馈都将不胜感激！：） 解决问题的一种方法是不要通过javascript添加CS
任何反馈都将不胜感激！：） 解决问题的一种方法是不要通过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>
<!-- 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>
document.body.className+='js'；
至于jQuery调整样式，请确保CSS覆盖了初始加载。您可以使用jQuery根据用户交互或设备大小调整/滚动/视图状态进行调整，但如果在javascript运行完成之前不能正确呈现，您的站点将在SEO中被破坏。查看Google Page Speed Insights以获得对用户体验及其加载配置的正确分析，了解更多详细信息。如果要使用加载div，另一种方法如下： 正常CSS（未检测到JS） 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 */
}
<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>
<!-- 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>
在此处加载消息或ajax加载gif
（函数（$）{
$（文档）.ready（函数（）{
setTimeout（函数（）{
$（“#加载”）.fadeOut（）；
}，2500）；//需要根据使用不同连接速度测试页面来调整超时，以获得适合目标用户的平衡。Chrome开发工具可以帮助您实现这一点
});
})（jQuery）；
如果目标受众的加载速度足够慢，以至于在加载屏幕显示速度不够快之前UI显示，则可以将加载div移动到身体的开口处；请记住，对于IE8及更早版本，z索引值并不重要。稍后在DOM中出现的任何位置相对或绝对的元素都将呈现在其上。感谢您的反馈。经过一些思考和实验，我发现我更喜欢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>
$（'#removeMe'）。remove（）；
警报（“jQuery有问题”）；
- 如果jQuery处于脱机状态，将显示安全表，javascript将警告问题
- 如果javascript离线，它仍将保留安全表
注意：请注意，如果仅使用干扰安全css的纯javascript进行任何样式更改，您可能需要为该场景添加另一个跨度。这可能不是您想要的答案，但这是您不应使用JS代码作为UI样式支柱的主要原因之一；JS处理中的延迟会导致FOUC。如果可以，将所有样式移到CSS。可以添加一个div，在渲染时“覆盖”所有窗口。然后隐藏这个div并显示加载的页面，甚至jQuery。为什么你担心非javascript用户的UX，然后给他们一个开发者警告？noscript体验的全部目的是提供用户友好的体验。即使是开发人员也会对如此神秘的警报感到恼火。此外，如果答案是可行的解决方案，至少向那些花时间回答您问题的人提供投票是一种常见的礼貌。您还应该重新考虑您的方法，以避免出现javascript错误。在尝试.remove（）之前，可以使用typeof（$）条件检测jquery是否未定义。当出现javascript错误时，较旧的浏览器将触发警告提示。