I have created a preloader which works fine when loading the page first time: http://vivule.ee/1
However, when navigating inside the page, the loader does not work as intended. You can see this very well when using FF. Instead of the loader it just displays empty background. I'm using ng-cloak, without it, instead of empty background it would show the content loading tags {{}}.
My loader works as follows - display loader until content is loaded, then hide loader with ng-hide. Can I instead of using ng-hide, somehow listen for ng-cloak, like when ng-cloak is activated it shows the loader and when content is loaded it hides it, because right now ng-clock seems to load BEFORE ng-hide.
Sorry if too confusing question :/
PS! To navigate inside the page scroll down to similar games and click on one.
I wasn't able to solve the problem using ng-cloak, instead I did this - the loader is displayed by default on the page. When angular loads the data I send jquery command to hide the loader (this is done in the myapp.controller). When I navigate inside the page, I unhide the loader with jquery(code is again in the myapp.controller) - NOTE! I unhide it BEFORE the new page is loaded.
Hide and unhide is done with simple display:none and display:block (unhide is done using jquery click).
$(".single_similar_game_container").click(function(e) {
if (e.button == 0) {
$("#spinner_bg").css("display", "block");
}
});