How to stop flash of unstyled content

后端未结

关注

 3  2022

This is just a short question, I don\'t really have an example but the I am using a bespoke cms and at present we have no access to the head of the web page so some css has

相关标签:

3条回答

借酒劲吻你

2020-12-15 13:43

Add a class to the content named no-fouc, set the class to display: none in the common CSS file, then remove the class on page load. The advantage of this solution is that it handles an arbitrary number of elements and can be reused on all pages.

$(function() {
  $('.no-fouc').removeClass('no-fouc');
  $('#dialog').dialog();
});

.no-fouc {
  display: none;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div class="no-fouc">
  <div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
  </div>
</div>

0 讨论(0)

时光说笑

2020-12-15 13:44
Fix for FOUC that does not require javascript:

At the top of your HTML:
```
<!doctype html> 
<html> 
<head>
     <style>html{visibility: hidden;opacity:0;}</style>
```
At the end of your last .css file:
```
html {
     visibility: visible;
     opacity: 1; }
```
https://gist.github.com/electrotype/7960ddcc44bc4aea07a35603d1c41cb0
0 讨论(0)
发布评论:

提交评论
- 加载中...
自闭症患者

2020-12-15 14:00
The basic solution to handle FOUC is to keep it hidden until it has been properly styled.

I assume that you have control over the content that is displayed unstyled? In that case, wrap it in a <div id="some-div" style="display:none">... content ... </div>. Then use jQuery to show it when the entire document is ready:
```
$(function() { $("#some-div").show(); });
```
0 讨论(0)
发布评论:

提交评论
- 加载中...