This is a migrated thread and some comments may be shown as answers.

How to fix the FOUCing menu?

6 Answers 168 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Dathan
Top achievements
Rank 1
Dathan asked on 12 Apr 2012, 11:40 PM
The menu has a flash of unstyled content (FOUC) before it renders, how do I fix that? Ideally, I'd have the menu fade-in after the render is complete.

Thanks.

6 Answers, 1 is accepted

Sort by
0
Dathan
Top achievements
Rank 1
answered on 13 Apr 2012, 12:34 AM
Here's my solution (which is no solution but works):

HTML:
--------------------------------------------
<html lang="en" class="no-js">
<head>
    <script>(function (H) { H.className = H.className.replace(/\bno-js\b/, 'js') })(document.documentElement)</script>
--------------------------------------------

CSS:
--------------------------------------------
        #menu {
            display: none;
        }
        .no-js #menu {
            display: block;
        }
--------------------------------------------

JavaScript:
--------------------------------------------
<script>
    $(document).ready(function () {
        $("#menu").kendoMenu();
        $("#menu").fadeIn();
    });
</script>
--------------------------------------------

Ideally, the kendoMenu() would have a callback.
0
Mike
Top achievements
Rank 1
answered on 16 Apr 2012, 12:01 AM
Dathan,

Same issue here but only on Ipad and Iphone.
0
Dimo
Telerik team
answered on 16 Apr 2012, 03:34 PM
Hello all,

Flashing of unstyled content is theoretically possible, if the page is too heavy or if there is something that slows down the browser before the Menu is initialized. This may include large script files registered in the <body> (instead of the <head>) or too many widgets being initialized before the Menu. If this is the case, some simple optimizations and refactoring of the front-end code should resolve the problem. Otherwise, the solution is to hide the raw HTML and show it back, as already demonstrated.

Greetings,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mike
Top achievements
Rank 1
answered on 16 Apr 2012, 04:56 PM
Hi Dimo,

I'm guessing this is why I'm getting FOUC:

@Html.ScriptCDN("https://da7xgjtj801h2.cloudfront.net/2012.1.322/js/kendo.core.min.js")

@Html.ScriptCDN("https://da7xgjtj801h2.cloudfront.net/2012.1.322/js/kendo.fx.min.js")

@Html.ScriptCDN("https://da7xgjtj801h2.cloudfront.net/2012.1.322/js/kendo.popup.min.js")

@Html.ScriptCDN("https://da7xgjtj801h2.cloudfront.net/2012.1.322/js/kendo.menu.min.js")

Is there a way to combine these scripts and still use CDN?  Would it make more sense to combine these scripts and serve them locally?

0
Dimo
Telerik team
answered on 18 Apr 2012, 08:44 AM
Hello Mike,

Loading, parsing and executing of scripts blocks the browser's thread. This means that if your scripts are registered in the page <body> the browser has already rendered some content and it will be visible while the scripts are handled. However, if the scripts are registered in the <head>, you should not experience any FOUC. No matter whether your scripts are served from the CDN or locally, this is the correct approach.

Otherwise, you can use kendo.all.min.js or kendo.web.min.js from the CDN, which are combined script files. The first one includes also DataViz and Mobile scripts, which you may not need.

Surely you can experiment with serving the scripts locally, but I don't think this is necessary or the best option.

Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
LyphTEC
Top achievements
Rank 1
answered on 09 May 2012, 03:11 PM
Yeah, I encountered a similar issue on one of my sites.

I just moved the jQuery & kendo script tags from the bottom of the page to the <head> section and it seems to have fixed the problem.
Tags
General Discussions
Asked by
Dathan
Top achievements
Rank 1
Answers by
Dathan
Top achievements
Rank 1
Mike
Top achievements
Rank 1
Dimo
Telerik team
LyphTEC
Top achievements
Rank 1
Share this question
or