CSS preload bug in HTML
Question
I have problem, when I want do preload for CSS:
<link rel="preload" href="{{ asset('css/vendor.min.css') }}" as="style" onload="this.rel='stylesheet'">
<link rel="preload" href="{{ asset('css/iziToast.min.css') }}" as="style" onload="this.rel='stylesheet'">
<link rel="preload" href="{{ asset('css/styles.min.css') }}" as="style" onload="this.rel='stylesheet'">
When page loading, I get HTML without styles for a few seconds. How I can do preload and with styles? HTML page is big.
1 answers
solution1
4 ACCPTED 2017-12-16 10:28:08
What you are experiencing is called FOUC . The typical way to deal with it is to use rel="stylesheet" , which makes your page load them as render-blocking (DOM building and javascript execution are delayed until all render blocking resources are loaded and CSSOM is built).
It's true, Google Pagespeed advises people to load styles async, because this means the page is rendered faster and javascript execution is started faster.
If you want to satisfy both conditions , the proper way is to provide an alternative minimal CSS layout (sizes, positioning and solid background-color) rules inline (in a <style> tag inside your <head> ),
- hiding normal elements
- drawing some simple shapes instead of content.
In your async loaded CSS you need to add rules to hide the schematic view elements and show the normal elements.
When done properly, the change between schematic view and actual content looks natural, like a focus in effect.
When sizing the schematic view elements, remember they need to be tested on all screen widths.
If you decide to use this technique, it's best to do it after the website reached its final form, including all content (no lorem ipsum , no dummy images). If you do it beforehand, chances are you will need to adjust it every time you decide to make changes to content or layout, as the schematic view won't match the actual content.
Here's a simple example in which I mimicked the loading process. Instead of applying styles from a stylesheet loaded later slower, I just applied some class after a determined amount of time ( 1s ), so you can see the effect of replacing schematic with content.
Please note the code inside this proof-of-concept is only intended to demonstrate the effect, it's not intended as a copy/paste solution. For this task you need to style the schematic elements specifically for your website's content, depending on how your website looks and behaves.
setTimeout(function() { let loaders = document.querySelectorAll('.loading'); loaders.forEach(function(item) { item.classList.add('loaded'); }); }, 1000)
* { box-sizing: border-box; } .loading { display: block; position: relative; } .content, .dummy-content { transition: opacity .3s ease-in-out; } .content { opacity: 0; } .loaded .content { opacity: 1; } .dummy-content { position: absolute; width: 100%; top: -20px; left: 0; opacity: 1; pointer-events: none; } .loaded .dummy-content { opacity: 0; } .dummy-content>* { background-color: #eee; content: ''; } .dummy-content h2 { height: 27px; } .dummy-content p { height: 114px; background: repeating-linear-gradient(180deg, #fff, #fff 6px, #eee 6px, #eee 18px) }
<div class="loading"> <div class="dummy-content"> <h2></h2> <p></p> <p></p> </div> <div class="content"> <h2>Home</h2> <p>Lorem ipsum dolor amet sartorial tilde typewriter chillwave, hell of tousled vegan lyft narwhal ramps craft beer cornhole unicorn. Crucifix pinterest tilde, bespoke jianbing iceland letterpress hoodie kinfolk you probably haven't heard of them cold-pressed. Disrupt occupy fanny pack lyft, lo-fi mustache butcher seitan deep v PBR&B jean shorts offal XOXO. Intelligentsia art party helvetica actually.</p> <p>Succulents kale chips crucifix 3 wolf moon. Blog umami green juice VHS, swag everyday carry post-ironic portland scenester heirloom chillwave art party meh pour-over cold-pressed. Forage chia kale chips lo-fi asymmetrical bicycle rights kombucha vape williamsburg tilde waistcoat pug franzen. Air plant shabby chic blue bottle viral, +1 microdosing next level palo santo vape hexagon ethical bespoke sartorial heirloom. Iceland glossier drinking vinegar seitan chillwave letterpress schlitz you probably haven't heard of them mlkshk adaptogen. 90's tattooed whatever, typewriter swag fam green juice brooklyn pug YOLO messenger bag. Mixtape roof party organic intelligentsia dreamcatcher health goth succulents drinking vinegar schlitz woke artisan hexagon everyday carry asymmetrical keytar.</p> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.