发表新帖
发表新帖

Eliminate flash of unstyled content

前端 未结
关注
12 2000
一个人的身影
一个人的身影 2020-11-28 02:39

How do I stop the flash of unstyled content (FOUC) on a web page?

相关标签:
12条回答
  • 离开以前
    2020-11-28 03:00

    No one has talked about CSS @import

    That was the problem for me i was loading two extra style sheets directly in my css file with @import

    Simple solution: Replace all @import links with <link />

    0 讨论(0)
  • 滥情空心
    2020-11-28 03:03

    I came up with a way that requires no real code change whatsoever, woohoo! My issue was related to importing several css files AFTER some javascript files.

    To resolve the issue I just moved my CSS links so that they would be above my javascript imports. This allowed all my CSS to be imported and ready to go ASAP, so that when the HTML appears on the screen, even if the JS isn't ready, the page will be properly formatted

    0 讨论(0)
  • 眼角桃花
    2020-11-28 03:06

    The best solution I found till now is like this:

    1. Add all styles of your header to a <style/> tag in <head/>

    2. at the top of style tag add .not-visible-first{visibility: hidden} + other header style

    3. Add css via JS at the end of body

      document.getElementsByTagName("head")[0].insertAdjacentHTML("beforeend","<link rel=\"stylesheet\" href=\"/css/main.min.css?v=1.2.4338\" />");

    4. And remember to add .not-visible-first{visibility: visible} to the end of main.min.css

    This option will create better user experience

    0 讨论(0)
  • 日久生厌
    2020-11-28 03:10

    Here is my code .. hope it solve your problem

    set <body style="opacity:0;">

    <script>
    $(document).ready(function() {
        $("body").css('opacity', 1);
    });
</script>
    0 讨论(0)
  • -上瘾入骨i
    2020-11-28 03:12

    This is the one that has worked for me and does not require javascript and it works great for pages with many elements and lots of css:

    First, add a dedicated <STYLE> setting for the <HTML> tag with visibility 'hidden' and opacity as '0' at the top of your HTML, e.g, in the beginning of the <HEAD> element, for example, at the top of your HTML add:

    <!doctype html>
<html>
<head>
    <style>html{visibility: hidden;opacity:0;}</style>

    Then, at the end of your last .css stylesheet file, set the visibility and opacity styles to 'visible' and '1', respectively:

    html {
    visibility: visible;
    opacity: 1;
}

    If you already have an existing style block for the 'html' tag, then move the entire 'html' style to the end of the last .css file and add the 'visibility' and 'opacity' tags as described above.

    https://gist.github.com/electrotype/7960ddcc44bc4aea07a35603d1c41cb0

    0 讨论(0)
  • 臣服心动
    2020-11-28 03:14

    The most simplest way I know of is to hide the html tag and then at the bottom of your javascript file, fade the html tag in.

    HTML

    <html style="display:none;">
    ...
</html>

    Javascript

    /*
 * FOUC Fix - Flash of Unstyled Content
 * By default, the <html> tag is hidden to prevent the flash of unstyled content.
 * This simple fadeIn() function will allow the page to gracefully fade in once 
 * all assets are loaded. This line of code must remain at the bottom of the js 
 * assets.
 */

$( 'html' ).fadeIn();

    Source: https://gist.github.com/marchershey/139db0e8fd6f03a83578698409d333ce

    0 讨论(0)
 看不清?
提交回复
热议问题