Fix FOUC on Firefox (#1728)
Firefox users will experience a flash of unstyled content on loading various pages, this patch will fix this issue using Filament Groups loadCSS library to asynchronously load the CSS responsible for the FOUC. Will fix #1698. Signed-off-by: Sondre Nilsen <nilsen.sondre@gmail.com>
This commit is contained in:
parent
642f844735
commit
24859fe5b6
4 changed files with 17 additions and 2 deletions
|
@ -36,6 +36,15 @@
|
|||
<td><a href="https://github.com/Ranks/emojify.js/archive/1.1.0.tar.gz">emojify-1.1.0.tar.gz</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="/js/libs/loadCSS.min.js">loadCSS.min.js</a></td>
|
||||
<td><a href="https://opensource.org/licenses/MIT">MIT License</a></td>
|
||||
<td><a href="https://github.com/filamentgroup/loadCSS/archive/v1.3.1.tar.gz">loadCSS-1.3.1.tar.gz</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="/js/libs/cssrelpreload.min.js">cssrelpreload.min.js</a></td>
|
||||
<td><a href="https://opensource.org/licenses/MIT">MIT License</a></td>
|
||||
<td><a href="https://github.com/filamentgroup/loadCSS/archive/v1.3.1.tar.gz">loadCSS-1.3.1.tar.gz</a></td>
|
||||
</tr>
|
||||
<td><a href="/plugins/dropzone-4.2.0/dropzone.js">dropzone.js</a></td>
|
||||
<td><a href="http://www.freebsd.org/copyright/freebsd-license.html">Expat</a></td>
|
||||
<td><a href="/plugins/dropzone-4.2.0/dropzone.js">dropzone.js</a></td>
|
||||
|
|
2
public/js/libs/cssrelpreload.min.js
vendored
Normal file
2
public/js/libs/cssrelpreload.min.js
vendored
Normal file
|
@ -0,0 +1,2 @@
|
|||
/*! loadCSS rel=preload polyfill. [c]2017 Filament Group, Inc. MIT License */
|
||||
!function(a){if(a.loadCSS){var b=loadCSS.relpreload={};if(b.support=function(){try{return a.document.createElement("link").relList.supports("preload")}catch(b){return!1}},b.poly=function(){for(var b=a.document.getElementsByTagName("link"),c=0;c<b.length;c++){var d=b[c];"preload"===d.rel&&"style"===d.getAttribute("as")&&(a.loadCSS(d.href,d,d.getAttribute("media")),d.rel=null)}},!b.support()){b.poly();var c=a.setInterval(b.poly,300);a.addEventListener&&a.addEventListener("load",function(){b.poly(),a.clearInterval(c)}),a.attachEvent&&a.attachEvent("onload",function(){a.clearInterval(c)})}}}(this);
|
2
public/js/libs/loadCSS.min.js
vendored
Normal file
2
public/js/libs/loadCSS.min.js
vendored
Normal file
|
@ -0,0 +1,2 @@
|
|||
/*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
|
||||
!function(a){"use strict";var b=function(b,c,d){function e(a){return h.body?a():void setTimeout(function(){e(a)})}function f(){i.addEventListener&&i.removeEventListener("load",f),i.media=d||"all"}var g,h=a.document,i=h.createElement("link");if(c)g=c;else{var j=(h.body||h.getElementsByTagName("head")[0]).childNodes;g=j[j.length-1]}var k=h.styleSheets;i.rel="stylesheet",i.href=b,i.media="only x",e(function(){g.parentNode.insertBefore(i,c?g:g.nextSibling)});var l=function(a){for(var b=i.href,c=k.length;c--;)if(k[c].href===b)return a();setTimeout(function(){l(a)})};return i.addEventListener&&i.addEventListener("load",f),i.onloadcssdefined=l,l(f),i};"undefined"!=typeof exports?exports.loadCSS=b:a.loadCSS=b}("undefined"!=typeof global?global:this);
|
|
@ -23,7 +23,8 @@
|
|||
{{end}}
|
||||
|
||||
<link rel="shortcut icon" href="{{AppSubUrl}}/img/favicon.png" />
|
||||
<link rel="stylesheet" href="{{AppSubUrl}}/assets/font-awesome-4.6.3/css/font-awesome.min.css">
|
||||
<link rel="preload" href="{{AppSubUrl}}/assets/font-awesome-4.6.3/css/font-awesome.min.css" as="style" onload="this.rel='stylesheet'">
|
||||
<noscript><link rel="stylesheet" href="{{AppSubUrl}}/assets/font-awesome-4.6.3/css/font-awesome.min.css"></noscript>
|
||||
<link rel="stylesheet" href="{{AppSubUrl}}/assets/octicons-4.3.0/octicons.min.css">
|
||||
|
||||
{{if .RequireSimpleMDE}}
|
||||
|
@ -53,7 +54,8 @@
|
|||
{{end}}
|
||||
<style class="list-search-style"></style>
|
||||
|
||||
<!-- Open Graph -->
|
||||
<script src="{{AppSubUrl}}/js/libs/loadCSS.min.js"></script>
|
||||
<script src="{{AppSubUrl}}/js/libs/cssrelpreload.min.js"></script>
|
||||
{{if .PageIsUserProfile}}
|
||||
<meta property="og:title" content="{{.Owner.Name}}" />
|
||||
<meta property="og:type" content="profile" />
|
||||
|
|
Reference in a new issue