Creating a simulated loading screen

I have created a preloader page for my website following tutorials, such as the one found here: https://codepen.io/bommell/pen/OPaMmj. However, I am facing a challenge in making this preloader appear fake without using heavy content like images or videos. I want it to serve as a default screen before my actual project loads. I have tried using setTimeout and clearTimeout in the JavaScript file, but it is not working as expected. Can anyone provide guidance on how to fake the preloading screen effectively?

function myFunction() {
    myVar = setTimeout(function(){ document.body.addClass("loaded"); }, 3);
  }

  function myStopFunction() {
    clearTimeout(myVar);
  }

Iframe or other tricks have made the preloader work properly in the past, but I am seeking advice on achieving a similar effect without relying on heavy content.

javascripthtmlcsssettimeoutpreloader

Answer №1

setTimeout is a function in JavaScript that instructs the browser to execute a certain action after a specified duration of time (measured in milliseconds - 3ms might be inadequate).

clearTimeout, on the other hand, is used to cancel the action previously set up using setTimeout.

It appears that your objective is to add the "loaded" class to the body element, eliminating the need for clearTimeout:

setTimeout(function(){ document.body.classList.add("loaded"); }, 3000);

This code snippet will add the "loaded" class to the body after three seconds.

Answer №2

To start, you'll need to set up a loading indicator. This could be a spinning image using CSS or a full-screen overlay with a higher z-index than your main content. The specific design doesn't matter as long as it can cover your loading elements. Be sure to give this element an id like 'loader'.

Next, once everything has finished loading, you can hide or even remove the loader from the page.

window.onload = function () {
   document.getElementById("loader").style.display = "none"; // HIDE THE LOADER
   document.getElementById("loader").style.remove(); // REMOVE IT COMPLETELY
}

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

What are the benefits of sticking with Express versus transitioning to a combination of JavaScript and HTML?

Recently, I've been developing a web application that involves taking user input to make modifications to files on the server side. The main logic for this project is built in node.js and operates via command line, with the rest of the site being deve ...

javascripthtmlnode.jsexpress

Execute the gulp module on the source files

Recently, I've been delving into the world of gulp and trying to enhance the readability of my js source files. I have a task in place (which executes successfully) that utilizes 'gulp-beautify' to beautify the js files: gulp.task('js& ...

javascriptnode.jsnpmgulp

What could be causing the function to not execute before the rest of the code in the React App?

My lack of expertise may be the reason, but I'm unsure how to address this issue: Here's what I have: A button labeled "Check numbers" <Button fullWidth variant="contained" onClick={this.checkOptOut ...

javascriptreactjs

Tips for sending a JavaScript variable within a div's ID in a Twig loop?

How can I insert a JavaScript variable into the ID of a div inside a Twig loop? Here is my unsuccessful attempt: <script type="text/javascript"> id = 0; </script> {% for element in parent.elements %} <div id="mydiv"> ...

javascripthtmltwig

Issue encountered: Next.js has failed to hydrate properly due to a discrepancy between the initial UI and server-rendered content

Uncertain about the cause of this error? The error seems to disappear when I remove the provided code segment. What is triggering this error in the code snippet and how can it be fixed? <div className="relative flex flex-col items-center pt-[85.2 ...

javascriptreactjsnext.jshydration

What exactly is the purpose of editing a host file?

After reviewing this repository, an automatic message pops up: Don't forget to modify your host file 127.0.0.1 * http://localhost:3001 What exactly does that entail? ...

javascriptnpmhost

Differences in jQuery selector behavior when targeting elements in parent windows compared to popup windows

In order for my userscript to function correctly, I have implemented a temporary solution. To create code that is easier to understand and maintain, it's essential for me to gain a deeper understanding of WHY the temporary fix works. Here is some code ...

javascriptjquerypopupjquery-selectorstampermonkey

Ensure that input field is validated only upon clicking the save button in Angular framework

Can anyone suggest the most efficient method to validate required fields in an input form using AngularJS? I want to display an error message only after the user clicks the save button (submit). Thank you in advance. ...

javascripthtmlangularjsvalidation

Having trouble incorporating autocomplete search results into an HTML table using Jquery, Ajax, and JSP

My current project involves an App that utilizes AJAX with jQuery to communicate with a Spring-boot REST controller. While the app is functional, I am facing difficulty in displaying the search results neatly within HTML tables. https://i.sstatic.net/7sw8 ...

javascriptjqueryhtmlajaxspring-boot

The getInitialProps function in Next.js React components does not automatically bind props

When building applications with Next.js, you have the opportunity to leverage a server-side rendering lifecycle method within your React components upon initial loading. I recently attempted to implement this feature following instructions from ZEIT' ...

javascriptreactjsnext.js

Add the attribute's value to an array

$(document).ready(function() { function randomColor() { return 'rgb(' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ')' ...

javascriptjqueryhtmlarrays

Resizing columns in HTML table remains effective even after the page is refreshed

I've created HTML pages with tables that have multiple columns, but I'm experiencing an issue. The columns are not resizable until I refresh the page. Could someone assist me in fixing this problem and explaining why it's happening? ...

javascriptjqueryhtml

Leverage the power of gRPC with Node.js and TypeScript for seamless

I'm trying to implement GRPC in a Node.js and Typescript project, but I'm facing an issue with generating proto files on Windows 10 using npm. I need to run the file transpile-proto-ts.sh: #!/usr/bin/env bash OUT_DIR="./src" TS_OUT_DIR="./src" ...

javascripttypescriptnpmgrpc

Database only accepts numerical data for insertion, rejecting any characters or alphanumeric entries

On a webpage, I have an input field through which I am passing the value into an ajax POST request. After logging everything in my JavaScript file and confirming that all is working as expected. In my PHP file, I retrieve the input value using $message = ...

javascriptphpmysqlajax

Is there a method for the parent to detect changes in its output when passing around complex objects to its child?

I am facing a challenge with a complex object that is being passed down from a parent component to its child components. The child components further break down this object and pass parts of it to their own children, creating layers of complexity. At times ...

javascriptangular

Exploring the Method of Accessing data-* Attributes in Vue.js

I have a button that, when clicked, triggers a modal to open. The content displayed in the modal is determined by the data attributes passed to the button. Here is my button: <button class="btn btn-info" data-toggle="modal" data-t ...

javascriptvue.jsvuejs2custom-data-attribute

The ng-show directive seems to be malfunctioning when used with UnderscoreJS's _.isNull function, but it functions properly when comparing

When using an ng-show directive on an element, I noticed that the UnderscoreJS helper function _.isNull behaves differently than the standard === operator. For example, when checking if newJobWorkPercentage is null: <div class="form-group" ng-show="ne ...

javascriptangularjsunderscore.js

How can I eliminate unnecessary gaps in a CSS slider design?

Currently, I am in the process of learning CSS3 and attempting to create a purely CSS slider. Everything has been going smoothly until I encountered an unexpected padding or margin within my slider. After making some adjustments to the margins, the issue ...

htmlcssslider

X-editable does not verify if the checklist values are checked

Hello everyone, currently I am working on a Laravel project where I have implemented the X-editable library for inline editing functionalities. I am facing an issue with updating a many-to-many relationship table (pivot table) and I am trying to use the X- ...

javascriptphpjquerylaravelx-editable

Making sure to detect page refresh or closure using jQuery or JavaScript

Could there be a way to determine if a page has been refreshed or closed using jQuery or javascript? The current scenario involves having certain database values that need to be deleted if the user either refreshes or leaves the page. AJAX calls are bein ...

javascriptjqueryajax