Postponing the initial display of a webpage

I am working with a web application from a different company that has some customization options limited to CSS and allows me to add HTML content at certain points in the code.

However, I need more flexibility than what CSS can offer, so I have resorted to injecting jQuery and employing JavaScript to manipulate the HTML elements they provide. This has caused a problem where users may briefly see the original page layout before it changes.

Instead of waiting for specific events like 'load' or 'document.ready', I am directly manipulating the DOM as soon as all elements are added.

How can I prevent users from seeing the temporary layout while the page loads?

My current solution involves using CSS to hide content that will be moved, applying a class to the <body> element with JavaScript upon loading to enable the hiding, and then removing the class once the DOM manipulation is complete. Is there a cleaner way to achieve this without resorting to hacks?

javascriptjqueryhtmlcss

Answer №1

Should we consider including something similar at the beginning of the body?

<div style="z-index:5000; background-color:#DDD; position:absolute; top:0; left:0; width:100%; height:100%;"></div>

Subsequently, should we conceal/delete this div after the other Javascript has been executed or when the document object model is fully loaded?

Answer №2

Check out this link for more information: http://gayadesign.com/scripts/queryLoader2/

Is that what you were looking for?

Just to make it clear, I am not the author of that script.

Answer №3

After much consideration, my final resolution looked like this:

  1. To kick things off, I inserted the following code right at the beginning of the <body>:

    <script type="text/javascript">
  document.body.className += ' loading';
</script>

  2. I then utilized CSS to conceal any elements that were set to be relocated or eliminated:

    body.loading #navigation,
body.loading ol.extra-links {
  display:none !important
}

  3. At the very conclusion of all DOM manipulation, I removed the loading class:

      <!-- include jQuery for transformation work -->
  <script type="text/javascript">
    // all transformations
    $(document.body).removeClass('loading');
  </script>
</body>

The advantage of implementing this method is that it prevents users from staring at a blank white screen while waiting for content to load. Any content left untouched (like certain CSS headers) remains visible and may slightly shift as new content appears around them.

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

Utilize TypeScript functions within Angular applications

I have successfully created a TypeScript module and after compiling it, I am generating a JavaScript file. However, when I try to use this JavaScript file within my Angular project in the index.html, it loads but I cannot access its functionality from any ...

javascriptangularjstypescripttypescript1.8

What are the steps to create custom Typescript RecursiveOmit and RecursivePick declarations for efficient cloning routines?

For some time now, I have been attempting to create a declaration for RecursiveOmit and RecursivePick in cloning methods such as JSON.parse(JSON.stringify(obj, ['myProperty'])) type RecursiveKey<T> = T extends object ? keyof T | RecursiveKe ...

javascripttypescripttypescript-typingstypescript-generics

Turn off any :hover CSS effects that are present when viewing on a separate media

Is it possible to disable hover effects on a specific CSS element during Print Preview and when printing a page? For example, if I have the following code: .this-thing:hover { /* something magical */ } I want to prevent the hover effect defined in .thi ...

htmlcss

Adjust ThreeJS camera zoom to match the size of a specific HTML element

I am currently diving into the world of Three.js and have stumbled upon an issue while trying to incorporate a plane geometry based on an image tag from the DOM. Situation Here is my current HTML template : <figure> <div class="aspect&quo ...

javascripthtmlvue.jsthree.js

React component for performing lenient string comparisons

I am in the process of creating a quiz and I am interested in exploring how I can compare a user's answers to a set of correct responses. Currently, I assess the user's score by using the strict === operator to verify an exact match between their ...

javascriptreactjsreact-nativejsx

Hover over a ListItem

Looking for advice on how to incorporate a Mouseover feature into a Material UI ListItem from the following link: http://www.material-ui.com/#/components/list. As the "SecondaryText" is limited to 2 lines, I am exploring options to display additional data ...

javascriptreactjsmaterial-ui

What is the best way to incorporate checkbox properties to monitor updates on individual rows in a table without relying on the Grid object or jQuery.Data(Input)?

Is there a way to perform form requests selectively on changed lines without relying on Grid or jQuery.Data(input) logic? Because the program is outdated, AJAX isn't suitable for this scenario as I don't want each line triggering a change event ...

javascripthtmlasp.netcheckbox

Arrange items in an array by two criteria

Sorting elements in a JavaScript array can be tricky, especially when trying to order them based on specific criteria like Ptr and Outputs values. In this case, the desired ordering is Node 0 -> Node 2 -> Node 1, where the Output of an element matche ...

javascriptarraystypescriptsorting

The Javascript function I created is simply showcasing some code on my HTML webpage

Having trouble incorporating images from my JS file using innerHTML - the output in my HTML file is just plain text instead of displaying images. This function is located within a class in the following JS file: setCardHtml(){ let imageHtml = this.card ...

javascripthtmlfunctioninnerhtml

Personalize the bootstrap-vue styling within your Nuxt project

Currently, I am working on a nuxt project and utilizing bootstrap-vue as a styling module for my components. I am unsatisfied with the default styles provided and wish to incorporate some customization. Specifically, I aim to modify the appearance of the ...

cssvue.jsbootstrap-4nuxt.js

Switching columns to rows using JavaScript

I came across a solution on Stack Overflow about swapping rows with columns in a matrix using JavaScript. However, it didn't work for me (probably because I'm still learning). The data is structured in arrays like: id [1, 2, 3] caption [one, tw ...

javascriptarraystranspose

What is the best approach to displaying child nodes in JsTree when they are only generated after the parent node is expanded?

Dealing with multiple children nodes under a parent can be tricky. For instance, when trying to open a specific node using $("#jstree").jstree("open_node", $('#node_27'));, you may encounter an issue where the parent node is not initially open, c ...

javascriptjstree

Storing bytes in Java until saving the Ajax file upload

As a Java developer utilizing Tapestry5, I have integrated a jQuery plugin to facilitate file uploads via ajax. My challenge lies in determining the most effective way to temporarily store the attachments until the page is saved. The current process involv ...

javajqueryfile-upload

Node.js 5.0.0 facing compatibility issues with installing NPM packages

I'm currently in the process of setting up my npm packages that are required for my code to function properly. Unfortunately, every time I attempt to install any npm package, I am faced with the same error message: Your system is configured for Node ...

javascriptnode.jsnpm

Why is my form automatically submitting instead of triggering an AJAX call using jQuery?

When I click submit on my form, I expect an ajax call to show in the console and the page URL to stay the same. However, the form action is triggered and the HTTP call changes the URL. <head> <script src="lib/jquery-1.6.4.min.js" type="text ...

jqueryajax

Hello there! I'm currently working on implementing a button that will alter the CSS grid layout

I need help designing a button that can alter the layout of my CSS grid. The grid information is contained within a class called 'container'. My goal is to change the grid layout by simply clicking a button, using either HTML and CSS or JavaScri ...

csscss-grid

Alerting on Synchronous XMLHttpRequest within an asynchronous function

Upon utilizing my browser (specifically the JQuery framework), I noticed a warning being printed to the console: The warning indicates that Synchronous XMLHttpRequest on the main thread is no longer recommended due to negative effects on user experience ...

javascriptjqueryajaxasynchronous

Tips on transferring a numerical ID variable from one page to another by clicking a link

I need help with passing a variable from an auto-generated button to another page when the button is clicked. The buttons all have the same link but different variables. How can I achieve this? Once I generate the button, I assign it a function like so: ...

javascript

Issue: unable to establish a connection to [localhost:27017]

Upon executing node app.js, an error message is displayed: Failed to load c++ bson extension, using pure JS version Express server listening on port 3000 events.js:85 throw er; // Unhandled 'error' event ^ Error: failed to conn ...

javascriptnode.jsmonolocalhost

How can you ensure that divs stay the same size and appear next to each other without resorting to using

I need assistance with organizing my website layout as shown below: https://i.sstatic.net/Dpof9.png The image div will display an image of variable size, which needs to be vertically and horizontally centered. The text div will contain a large amount of ...

htmlcss