acss-live/examples/late-loading-hide.html at master · fidian/acss-live · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Late Loading - Hide</title>

        <!-- Hide body until ACSS-Live processes it -->
        <style>
            body {
                display: none;
            }
        </style>

        <script src="interactivity.js"></script>
    </head>

    <body class="D(b)">
        <h1 class="D(f) Jc(c) Ai(c)">Late Loading - Hide</h1>

        <p>
            Load the script late (after elements are in the DOM) and avoid a
            flicker while CSS styles are generated by initially hiding the body.
            To accomplish this, you need to have one style loaded in the head
            (either embedded in the HTML or in another stylesheet) that has
            <tt>body { display: none; }</tt>, then add <tt>class="D(b)"</tt> to
            your <tt>body</tt> tag.
        </p>

        <!-- This next chunk of text is added to help prove that a problem exists or that a solution works. -->
        <p class="D(n)">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Pellentesque ornare convallis leo id pulvinar. Sed id libero et
            ipsum cursus eleifend. Quisque et felis a sem lacinia tempus eu in
            turpis. Maecenas consequat pretium tellus, quis tristique ipsum
            varius sed. Maecenas sollicitudin sem nec ex consectetur, ac
            efficitur sem dictum. Quisque ullamcorper posuere interdum. Ut
            efficitur vestibulum fringilla. Nam eu ex vel urna tristique dictum.
            Pellentesque luctus accumsan tincidunt. Ut dignissim augue quis arcu
            dignissim, nec vulputate elit efficitur.
        </p>
        <p class="D(n)">
            Quisque eu vulputate lorem. Praesent porta finibus venenatis.
            Curabitur sed lorem convallis, varius metus quis, pharetra sapien.
            Nunc eget congue arcu. Etiam vel nunc consectetur, venenatis mi vel,
            pulvinar nisi. Vestibulum ante ipsum primis in faucibus orci luctus
            et ultrices posuere cubilia curae; In sem ex, gravida id sapien sed,
            semper volutpat dolor. Nulla rhoncus bibendum iaculis. Aliquam nec
            turpis sed turpis tristique dictum sed a nisi. Praesent quis lorem
            eu magna hendrerit fermentum id id est. Quisque placerat eget justo
            eget tincidunt. Curabitur mattis blandit placerat. Mauris eros
            massa, vehicula sit amet nunc ut, rhoncus laoreet nunc. Phasellus
            arcu mauris, tempus ut placerat commodo, lacinia dapibus felis. Ut
            vel nibh ligula. Pellentesque interdum felis id ipsum rhoncus, nec
            iaculis ipsum laoreet.
        </p>
        <p class="D(n)">
            Fusce rhoncus magna tellus, vel efficitur massa placerat ac. Duis
            dignissim velit dolor, id tempus metus bibendum vitae. Sed viverra
            turpis gravida diam efficitur euismod. Nulla quis justo eu lectus
            fringilla pellentesque. Sed vel malesuada tortor, in condimentum
            arcu. Curabitur non suscipit elit, eget ornare mi. Donec convallis
            enim condimentum ipsum tempor maximus.
        </p>
        <p class="D(n)">
            Ut nec finibus felis. Nullam elementum elit risus. Donec consectetur
            leo et leo mattis rutrum. Ut et elit sem. Vivamus ut dictum tellus.
            Pellentesque non porta augue. Sed dictum auctor molestie. Sed
            vulputate nisl quis justo commodo vulputate id sed mauris. Praesent
            luctus, sapien in efficitur aliquam, lectus ipsum aliquam ligula, id
            egestas risus ante a quam. Nulla vel purus augue. Fusce finibus,
            nisl a sollicitudin vestibulum, urna arcu tincidunt felis, ut
            fringilla odio nisi at lectus. Maecenas tincidunt justo ligula, et
            hendrerit quam pretium dapibus. Donec vestibulum velit in ante
            ultrices, non mollis odio faucibus.
        </p>
        <p class="D(n)">
            Vivamus pellentesque pulvinar nunc, sed sagittis ex hendrerit sed.
            Quisque at sem nisi. Class aptent taciti sociosqu ad litora torquent
            per conubia nostra, per inceptos himenaeos. Etiam et lorem non
            libero iaculis facilisis. Cras ultrices faucibus mauris, ut
            malesuada neque scelerisque quis. Nunc volutpat tortor suscipit
            neque aliquet blandit. Nunc faucibus porta tincidunt.
        </p>
    </body>

    <!-- Intentionally load late in order to prove that styling exising
        elements works and to test if there is an unstyled flicker -->
    <script src="../acss-live.js"></script>
</html>