Terrible flicker when loading page

[Nick Raphael]

Hi,

I've got a simple mobile website with 3 separate pages.  When each page renders on the iphone, it renders the page without styling and quickly flickers to the correctly rendered view.  So for a grid, I see an ugly bullet list for a split second before it flickers to the nice looking grid.  This happens on all my pages.

How do I avoid this?

Kind regards

Nick

[Fasdy]

Had the same problem. Any fix?

[Alexander Valchev]

Hi guys,

I was not able to reproduce this behaviour with the official mobile demos. Does the problem persists there?
The issue might be connected with the way mobile application components are initialized or the amount of data that is being loaded. Actually there is a help article where you will find suggestions how to speed up the view transitions.
If those guidelines does not help, it would be best to open a support ticket with a runnable test project attached. Thus way we would be able to observe the problem, track down the cause and advice you more accurately.

Regards,
Alexander Valchev
the Telerik team

[Mat]

One approach we use to solve this is to clear the div or ul before the data is loaded (in our case via a JSON feed)...
i.e.

$("#somelistordiv").html("");

before calling

$.getJSON("data/test.json", function(result){
... code to populate #somelistordiv
}

[Nick Raphael]

Yes, it happens on the official demos.  I've attached screenshots - during loading and after loading.

[Andrew]

It also happens to me with official demos.

It happens when you first navigate to the index page or if you refresh the index page. This doesn't look good.

I hope someone from Telerik will answer with a solution.

We are currently evaluating different mobile frameworks.

Also, the navigation between pages, from example back to the index page is very slow.

Telerik and other companies are advertising that they have a mobile framework but the reality is it doesn't really work.

[Alexander Valchev]

Hello guys,

It seems that I mislead you, please accept my apologies for that.
Indeed such behaviour (Flash of unstyled content) occurs when the external resources are not loaded fast enough.

To prevent the FOUC you can hide the content initially (with visibility: hidden, but not with display: none) and then show it when everything loads/inits (like in a data-init event). In this forum post you will find more information on the subject as well as a code snippet demonstrating how this could be done.

Regards,
Alexander Valchev
the Telerik team

[Andrew]

Alexander, but why that fix is not part of the demo itself?

[Alexander Valchev]

Hello Andrew,

Thank you for the suggestion. We will consider using this approach in the official demos as well.

Regards,
Alexander Valchev
the Telerik team