forum

home / developersection / forums / loader before loading an html file through javascript

Ask Question

Loader before loading an HTML file through JavaScript

Anonymous User 306 19-Jul-2021

How to display a loading bar before the entire page is loaded through JavaScript?

javascript javascript 
Updated on 19-Jul-2021
Anonymous User

Software Developer Trainee

I am a content writter !

Message
Can you answer this question?
Answer

1 Answers

Ethan Karla

Ethan Karla

20-Jul-2021

Loading bar can be achieve with the help of window load event. The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images.

Let's understand it with the help of an example : 

<!DOCTYPE html>

<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>

<head>

    <meta charset='utf-8' />

    <title>Asynchronous JavaScript </title>

    <script>

        window.onload = function () {

            // PAGE IS FULLY LOADED  

            // FADE OUT YOUR OVERLAYING DIV

            var fadeTarget = document.getElementById('overlay');

            fadeTarget.style.opacity = 0.1;

        };

    </script>

</head>

<body align='center'>

    <div id='overlay'>

    <img src='loading.gif' alt='Loading' />

    Loading...

</div>

</body>

</html>

Hope this information has cleared your confusion.

Happy Coding!

MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy