6 Answers, 1 is accepted
0
Dathan
Top achievements
Rank 1
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.
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
Admin
Top achievements
Rank 1
Rank 1
answered on 16 Apr 2012, 12:01 AM
Dathan,
Same issue here but only on Ipad and Iphone.
Same issue here but only on Ipad and Iphone.
0
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
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
Admin
Top achievements
Rank 1
Rank 1
answered on 16 Apr 2012, 04:56 PM
Hi Dimo,
I'm guessing this is why I'm getting FOUC:
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
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
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
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.
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.