使用jQuery安全地重新设计页面的加载外观很难看

所以我有一个网站，我已经样式和功能与css只是以防用户无法使用javascript。事情是我用jQuery做了进一步的样式更改，并附加了一个外部样式表到'头'。

现在，当页面加载时，样式变化可以在一瞬间看到，但它使页面看起来非常紧张(因为一些样式变化很大)。我不希望我的用户看到这种紧张的负载，我想要一些建议，我可以做些什么来隐藏页面/提供一个平滑的过渡，如果jQuery响应较晚(慢连接)在样式更改期间。

任何反馈将非常感谢!:)

解决问题的一种方法是不通过javascript添加CSS，而是像通常的CSS链接一样包含它。对于只针对启用了javascript的设备的样式表，只需预先添加一个由javascript添加的主体类。像这样:

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>

你也可以像modernizr等其他引擎一样使用html标签。如果你在css中使用less或sass，那么这个过程就会大大简化，但是如果你不这样做，那么它就会有点乏味。

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

对于jQuery调整样式，请确保您的CSS覆盖初始加载。你可以使用jQuery来根据用户交互或设备调整大小/滚动/视图状态进行调整，但是如果你的网站在javascript完成运行之前没有正确渲染，那么你的网站将在SEO中受到影响。查看Google Page Speed Insights对您的用户体验进行适当的分析，并加载配置以了解更多详细信息。

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

Normal CSS (No JS Detected)

#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>

以上是一个简化的方法。您可以将功能转换为可以在需要时重用的函数，但这是您如何进行操作的要点。没有简单或可靠的方法来检测用户的速度，所以如果您必须在网站上玩，看看在不同的连接速度下什么效果最好，以获得一个平衡的超时。在我看来，这并不是一种首选方法，但如果你想使用加载屏幕，这应该会给你一个很好的起点。

如果你的目标用户加载速度太慢，UI在加载屏幕显示之前显示的速度不够快，你可以将加载div移动到body的开头;请记住，在IE8和更早的版本中，z-index值并不重要。之后出现在DOM中的任何相对位置或绝对位置元素都将在其上方呈现。

感谢您的反馈。经过一番思考和实验，我找到了比javascript检测或加载屏幕更喜欢的东西。

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

在我所有的脚本标签(body的底部)之后，我把这段代码放在它的下面。

<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离线，它仍然会保持安全表。

注意:请注意，如果仅用纯javascript进行的任何样式更改干扰了安全css，则可能需要为该场景添加另一个span。

相关内容

最新更新

热门标签：