Recognizing the completion of all downloads

Is it now possible in the world of web development to use HTML, CSS, and Javascript to show a loading message on the screen until all elements have fully downloaded before displaying the webpage?

For instance, can we show "loading" until everything such as html, css, javascript, images, etc. have finished downloading so that the user does not see parts of the website appearing after the loading message disappears?

UPDATE: THE .LOAD METHOD DOES NOT WORK:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>

        <script  type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

        <script type="text/javascript">

            $(document).load(function(){

                alert("loaded");

            });

        </script>
    </head>
    <body>

    </body>
</html>

Answer №1

Definitely, using jQuery and JavaScript will make achieving this task a breeze:

$(document).ready(function(){

    $('body').addClass('loading'); // display loading gif

    $(window).load(function(){
        $('body').removeClass('loading'); // remove loader on window load
        $('#content-wrapper').show();    // show content wrapper after everything is loaded.
    });

});

Answer №2

One way to achieve this is by utilizing the $(window).load() method

$(window).load(function(){
    alert("Page loaded successfully");
})

Answer №3

A definite affirmative, <body> comes equipped with an attribute known as onLoad. You can find more details about it here. Here is a simple example illustrating its usage:

<script type="text/javascript">
function completed() {
    document.getElementById("loadingtext").innerHTML = "";
}
</script>

<body onload="completed()">
<div id="loadingtext">Loading...</div>

Having said that, opting for a framework certainly streamlines the process.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to properly close the bootstrap tags

Having an issue where I can't seem to properly close Bootstrap tags in my code. Here's a snippet of the HTML: <html> <head> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery.js ...

What is causing the inability of this simple Google Maps link to function properly on a Nexus 7?

Visit this link for Google Maps A client has reported that the link above is causing an error when opening the maps app. The error message reads: "unsupported link. Google Maps can't open this link." This problem is occurring on a Nexus 7 and Samsu ...

Discovering the object and its parent within a series of nested arrays

Is there a way to locate an object and its parent object within a nested array of unknown size using either lodash or native JavaScript? The structure of the array could resemble something like this: name: 'Submodule122'</p> I have been ...

Is the "sizes" attribute of the "picture" element functional in Chrome when it comes to <source>?

The incredible <picture> element has been functioning flawlessly in the Chrome browser for well over a year, yet regrettably, I seem to be encountering an obstacle when attempting to make use of the powerful sizes attribute within the <source> ...

Having trouble with Vue i18n and TypeScript: "The '$t' property is not recognized on the 'VueConstructor' type." Any suggestions on how to resolve this issue?

Within my project, some common functions are stored in separate .ts files. Is there a way to incorporate i18n in these cases? // for i18n import Vue from 'vue' declare module 'vue/types/vue' { interface VueConstructor { $t: an ...

changing the contents of an array within the current state

My current task involves updating a list of names in the state before sending it as props to another component. // code snippet omitted for brevity this.state = { // other states here playerName: { player1Name: 'Default Player 1 Name ...

Is it advisable to build dynamic pages using jQuery Mobile?

I'm currently working on a phonegap/jQuery-Mobile app that dynamically populates a list from the Google Books API based on user input such as an author's name or book title. When a user clicks on a list item, I want a new page to display with the ...

Issue encountered while attempting to attach an event listener to an element within a class

Upon running the code, I encountered an error message that reads: Uncaught TypeError: this.startButton.addEventListener is not a function and I'm unsure of how to resolve it. Although I can successfully console.log the button inside the class, adding ...

(node:45207) UnhandledPromiseRejectionWarning: The server has already sent headers, which caused an error

Currently, I am expanding my knowledge of Node.js through the development of a straightforward code snippet application. The application is designed to include two essential fields, namely title and snippet. However, I am encountering a persistent error me ...

My function seems to be functioning perfectly fine in Angular and Express, but for some reason, it's not working in Parse Cloud Code. What could

I am facing an issue with my code where it seems to be stuck. After testing it in both Angular and Express, I realized that the code is only progressing up to a certain point due to the requirement of the Master Key to edit the User table with new data. ...

The form validation in Bootstrap 5 seems to be having some trouble triggering

Here is the form setup for allowing users to change their account password: <div class="signup-form-small"> <form method="post" name="frmPassword" id="frmPasswo ...

"Encountering a problem with historical dates in Fullcalendar

One challenge I am facing is that my events are accepted even when dropped into the past. This issue has arisen while using version 2.4. I attempted to resolve this by utilizing eventConstraint, but unfortunately, it proved ineffective. Could you provide ...

The brand in the Bootstrap 4 navbar remains consistent even when the screen is maximized

Having an issue with my navigation bar design. I'm currently working with Bootstrap 4 Beta and facing a problem when trying to adjust the navbar-expand-... The current appearance of the navbar-brand looks like this: COMPANY NAME However, I want it ...

Cartify: Your Ultimate Bootstrap Shopping Companion

My goal is to create a shopping cart that looks similar to this: https://i.sstatic.net/McOdf.png However, I am struggling to achieve the design where "Local Delivery" is positioned on the left and the circle with a plus sign inside of it is on the right ...

Creating flexible items with a 1:1 ratio and ensuring that the padding on the left and right of the flex container remains consistent

Whenever I adjust the size of the window, https://i.sstatic.net/Fm3d1.png the flex-container ends up with uneven padding on the left and right, which is less than ideal. So, I am looking for a way to allow the flex-item to resize when the window size c ...

Interacting with backend APIs using Angular 2

Currently, I am working on an Ionic AWS application and have completed the front-end development phase. Here is what I have so far: Front-end repository: Ionic front-end List of Backend repositories: Example resources Example get Example post ...

Looking for guidance on restructuring a JSON object?

As I prepare to restructure a vast amount of JSON Object data for an upcoming summer class assignment, I am faced with the challenge of converting it into a more suitable format. Unfortunately, the current state of the data does not align with my requireme ...

Loading data with Ajax from a remote file using a specific identifier

Can someone lend me a hand with an issue I'm facing? I've set up a small like system here. Within my HTML file, I have various data with unique IDs. Take a look at the code in my remote.html file below: <span id="14">314</span> < ...

Trouble encountered with my onClick getJSON Function

I am in the process of developing a section in my app that will handle fetching JSON data, which will eventually be added to a ListView. For now, I simply want the JSON PHP file to be displayed when the Json button is clicked. Here is the error message I ...

Reverse the action and postpone the Ajax call for a specified time or until the next action occurs

How can I implement a setup and undo feature for my ajax calls that allows users to delay the call for a set amount of time and abort it if needed? I also want to be able to stop the delay and proceed with the most recent ajax call if another action is tri ...