Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

forum

Home Forums Loader before loading an HTML file through JavaScript – MindStick
Ask Question

1 Answers

Ethan Karla
Ethan Karla 20 Jul 2021
Report Abuse

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!

advertising
Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md