How to add page loading sign while the the page is loading and can it be an image/gif?

16th May 2017, 2:34 AM

Varun Kumar

6 Answers

+ 4

Yes, it can be an image/gif, or whatever html content you want... The 'onload' event occurs when an element and all their dependencies are completly loaded: for an <img> element when the image have finished load ( see @Calvin code example ), for the <body>, when all images in the document are loaded, as for the 'window' object ( this a the same event: when body is loaded, the complete document is also loaded ). So, if you want use image while the page load, you need to use a light weight one, to be quickly loaded, and have it in first in your html ( if use as css background image, must be in declared as soon as possible too -- before anyelse one )... why not encoding it in base64 text format, to be loaded with the html ( without do request for fetch it ). You can use position:fixed on a container element, with top:0, left:0 and size width:100vw, height:100vh to fit the user viewport, and be on top of the rest of content page, even if scrolling occurs... To be safe ( avoiding scroll of the preload element ), add an overflow:hidden, and for centering his content horizontaly and verticaly, you can use the FlexBox model ( display:flex -- or a <table> structure, applied on any element ^^ ). Set some background at container for avoiding default transparency; and z-index if in case of other positioned element in the document. Then, simply use JS and one of the above talked events to set display:none when page is loaded to the preload image container. Check this code, where I apply that solution: https://code.sololearn.com/WQFY6mw16wjK/?ref=app Obviously, if the page content is lightweight, the onload event will occurs too quickly to be seen by user. ( if my example use too lightweight images for your bandwith, test with content you know longer to be loaded :P ) But you can also use class names to be set/unset, with some css transition property to do an animated transition ( so it will be see even if page is instantly loaded ) as fading, blurring, sliding and/or so on ^^ ) instead on/off visibility ;)

16th May 2017, 5:53 PM

visph

+ 2

https://code.sololearn.com/WXHUApnqKBUq/?ref=app

16th May 2017, 4:05 AM

Calviղ

+ 2

Well, so: I just notice I had always implement this kind of example, with the <table> centering solution, and lightly different implementation of onload event ( window rather <body> in the one I wrote for you ;) ): https://code.sololearn.com/W39ioBVR1eJn/?ref=app [ edit ] Without preload image, but css animated text ^^ ( but easily adaptable )

16th May 2017, 6:00 PM

visph

+ 1

Guess nope :D Here's too much work I don't want to do at least till I'll see you're trying to make somethin'. You can follow steps: 1.Make some simple page. 2.on loading - pre-loader block should appear.(You can google up any pre-loader code,it's simple to find) 3.When load finishes hide or remove loader block. I'm sorry if it sounds wicked or not helpful,but if you don't know how to do somethin' of this steps - you should learn it first or at least try to learn and come back for some questions if you don't undestand somethin'. I will never do whole work for someone if he didn't even tryed to do or goole up somethin'. Or ... maybe you can wait for some not that wicked sololearn member :D

16th May 2017, 2:53 AM

Rose Sevenyears