搜索

首页 >web前端 >css教程 >如何消除无样式内容的 Flash (FOUC)？

如何消除无样式内容的 Flash (FOUC)？

原创
2024-11-22 17:29:14891浏览

How to Eliminate the Flash of Unstyled Content (FOUC)?

解决无样式内容的 Flash

网页加载时出现不必要的无样式内容是一个常见问题，称为 无样式内容的 Flash (FOUC) )。这篇简短的文章讨论了这个问题及其解决方案。

使用 CSS 隐藏页面元素并随后使用 JavaScript 显示它们的传统方法是有问题的。它会损害禁用 JavaScript 的用户的网站可用性。

为了克服这个问题，建议在页面加载后使用 JavaScript 隐藏和显示元素。虽然 jQuery 提供了初步的解决方案，但它可能不够及时，无法避免较大页面的 FOUC。

更有效的技术是在页面渲染之前用 JavaScript 隐藏 HTML 标签，从而在脚本执行时快速隐藏:

<html>
  <head>
    ...
    <style>
      .hidden { display: none; }
    </style>
    ...
    <script>
      $('html').addClass('hidden');
      $(window).on('load', function () {
        $('html').removeClass('hidden');
      });
    </script>
  </head>
  <body>
    ...
  </body>
</html>

在这种方法中，jQuery 的 addClass() 函数在 .on('load') 方法之外调用，确保隐藏 HTML 标签立即。

以上是如何消除无样式内容的 Flash (FOUC)？的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript swift jquery css html for while function this display issue prompt
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：How Can I Achieve Equal Spacing Between Flexbox Items, Including the First and Last?下一篇：How Can I Easily Add Vendor Prefixes to My CSS?

相关文章

查看更多