如何消除无样式内容的 Flash (FOUC)？-css教程-PHP中文网

解决无样式内容的 Flash

首页

web前端

css教程

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

Nov 22, 2024 pm 05:29 PM

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

解决无样式内容的 Flash

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

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

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

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

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

登录后复制

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

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

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn