show image for a time, before displaying the real webpage

Question

I have a webpage, made with AngularJS. I want to display a image (fullscreen) for 5 seconds, before the user sees the real page. Like a kind of loading screen

According to this: window.onload does not work in AngularJS its not possible to use window.onload.

with some research i found the following functions: - ng-Show - ng-Hide - ng-init (article)

but i have no idea how i would do this..?

Sorry if this is a bad question, im quite new.

Answer 1

You can use angular-fullscreen directive for fullscreen

angular-fullscreen- is an AngularJS service and a directive to quickly use the HTML5 fullscreen API and set the fullscreen to the document or to a specific element. and after 5 seconds you can use ng-hide to hide the directive.

fullscreen demo page:http://www.fabiobiondi.com/demo/github/angular-fullscreen/demo/