I am using AJAX update of Yii a lot now in my new project: if I click on the main menu (top), it will update the side-navigation tree(left), and clicking on any link on the tree will update the main content. I have no problems with it so far, but upon loading of the side navigation which uses CTreeView, I am encountering flash of unstyled content (FOUC) and it is not nice.
Does Yii already has an answer to fight the FOUC? Anybody here already encountered the issue and was able to address it successfully?
I presume that the ajax update does something like this (its the way most plugins works)
add "pure" HTML content
after all the content is loaded, call an JS/jQuery function that adds class names to the new added content
So as first the "pure" (unstyled) content is added, and only then the style applied… the FOUC happens…
One solution would be to style the code added, but that is specific for every component… so you would need to find what classes CTreeView adds to the HTML content when it’s called… and just render all that classes manualy
Thanks for the reply. Ok I’ll try that. It sounds tedious though
What if I just put some delay? I’m thinking of putting a loading gif when I click on an ajaxlink, and when everything is loaded, I’ll remove the GIF then display the content. Does Yii(ajax or jquery) provide something that I can use as a trigger so I’ll know when everything has been successfully loaded?
But it can be run before the styling is applied… .so the solution would be to use javascript function setTimeout() inside the complete… A timeout of 400 is enough in my experience for the display to be called soon enough but not before the styling is applied…
