The speed of CSS loading is sluggish when navigating to a new page without refreshing

Every time I try to load a different page with refresh using jQuery and

window.history.pushState('','',url);

function goto(event,el)
{
    url=el.href;
    event.preventDefault();
    window.history.pushState('','',url);
    //$('html').load(url);
    $.get(url, function(data) {
        var head=data.match(/<head[^>]*>[\s\S]*<\/head>/gi);
        $('head').html(head[0]);
        //$('#content').html($(data).find('#content').html());
        var body=data.match(/<body[^>]*>[\s\S]*<\/body>/gi)
        $('body').html(body[0]);
    }); 
}

The HTML is loading before the CSS, resulting in about 1-2 seconds of naked HTML display before the CSS loads completely.

Since all my pages are different, I have to load different CSS and scripts every time.

Is there a way to make the CSS load quicker than the HTML, or is there a better way to load the entire page or replace the current page content with a new page?

I really prefer not to use any plugins.

Answer №1

An effective strategy is to incorporate a Spinner or loader during page load to avoid exposing naked HTML forms to users. You can find more information on this topic in the following link: How to show Page Loading div until the page has finished loading

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

Tips for validating Angular form group input depending on the value of another input within the form?

I am facing an issue with form validation in my Angular version 8 application. I need to validate a form based on the following rules: If a file is uploaded (even if just clicking the button without selecting a file), then the Reason input is not required ...

Strange response received from $http GET request on Android device running Crosswalk

I am attempting to retrieve data in JSON format from an API using AngularJS. The process is successful on iOS and desktop browsers, but I'm encountering a strange response when trying it on my Android device. The request code looks like this: $http({ ...

Is there a way to alter the camera's focal point in THREEJS to focus on a specific object already in the scene?

Currently, I am working with a scene extracted from a THREEJS example (https://threejs.org/examples/webgl_loader_fbx.html) that involves importing and displaying a threejs.json scene. The rendering of the scene works perfectly; I have a grid in place with ...

What is the best way to ensure uniformity in my boxes (addressing issues with whitespace and box-sizing using flexbox)?

Below is the code I have written: body { padding-top: 20px; text-align: center; background-color:black; } h1 { display: inline-block; background: white; } h1 { font-size: 30px } p { background: yellow; } .container { display: flex; ...

What is the best way to reduce the viewport size of my application to 67% of the Chrome browser view?

Recently, I acquired an Angular application that comes with hundreds of SCSS files. However, when the application is viewed in a browser set to 100%, it appears ugly and too zoomed in. Applying zoom: 70%; to the index.html body improves the appearance, bu ...

How can I modify the value of a CSS animation rule in AngularJS?

I am looking to dynamically change the value assigned to stroke-dashoffset based on a custom input. @-webkit-keyframes donut-chart-1 { to { stroke-dashoffset: 100; } } @keyframes donut-chart-1 { to { stroke-d ...

Transfer dynamically generated table data to the following page

Seeking guidance on a common issue I'm facing. I am creating a table using data from Firebase upon page load, and I want users to click on a row to view specific details of that item. It may sound confusing, but it will make more sense with the code p ...

What impact does including lang=less in a Vue component's style have on its behavior?

Exploring ways to scope the CSS of my Vue component, I initially considered using less to encapsulate my styles. However, after discovering the scoped attribute as the recommended method, I realized that my approach needed adjustment. In my original setup ...

Position the colored div on the left side of the page

Here is the CSS I am currently using... <style type="text/css"> .widediv{width:1366px;margin-left:auto;margin-right:auto} </style> This CSS code helps me create my webpage : <body><div class="widedivv"> <!-- Content go ...

Error: The 'register' method is not defined for the User object in the passport-local-mongoose module

While attempting to create a user using the register function from passport-local-mongoose, I encountered an issue. An error message was displayed: TypeError: User.register is not a function at exports.register (....\controllers\userController ...

Unable to assign a value to a data attribute using jQuery

For some unknown reason, the code $('element').data('data_attribute_name', 'value'); is not functioning properly in this scenario: Here is the HTML structure: <ul class="main_menu__list" data-scheme="light"> ... </u ...

Bootstrap 5's gutter-x class is causing alignment issues with divs

My div alignment is getting thrown off due to the default .row class. The margin_left and right call it includes add gutters that cause borders to overlap my div. Although I have disabled gutters in this particular element, it leads to problems elsewhere o ...

Obtain gridview row coordinates to create a canvas drawing using Raphael.js

I need to create various shapes based on the status of each row. In order to make it compatible with Internet Explorer, I have integrated the Raphael JavaScript library into my project. The backend is built using ASP.NET and C#. To draw these shapes, I mus ...

Optimizing the selection and deselection of checkboxes using JQuery with X checkboxes in mind

If I have a set of 'X' checkboxes (any input elements) in a form and "M" option selection indexes ("M" less than or equal to "X"), how can I efficiently select the "M" option indexes/values and deselect the remaining checkboxes? For example, if ...

Struggling with aligning content within a div using CSS grid techniques

I am experimenting with CSS Grid and running into issues with overlaying content. The structure consists of a top-level container defined as a CSS grid (class="container"), followed by a content grid (class="content") that divides into 3 rows (header, labe ...

The CSS styling is not applying correctly to a particular page

Having a minor CSS issue here. I am attempting to change something for a specific page or post, like in the case of wanting to change the background color of the entry content of page number 2458. I've managed to get that working with the following co ...

Save user's email and password for future logins after the initial login

Is there a way to automatically populate the user's email and password in the login form when they check the "remember me" option and return to log in again? This is for a project using React and Next.js. ...

Using Google Analytics to monitor open rates and click-through rates of emails

After carefully reviewing the document, I noticed a unique track code that should be able to assist me. However, I am unsure about how to effectively utilize it in order to obtain the open rates and URL click rates. Regarding open rates: I am currently us ...

Unable to render Material Icons on Vue/Quasar web app hosted on Azure

I am facing an issue with my webapp built using Vue and Quasar. I added the necessary icon imports to my quasar-user-options.js file. import '@quasar/extras/material-icons/material-icons.css' import "@quasar/extras/material-icons-outlined/ma ...

Collaborate on sharing CSS and TypeScript code between multiple projects to

I am looking for a solution to efficiently share CSS and TS code across multiple Angular projects. Simply copy-pasting the code is not an ideal option. Is there a better way to achieve this? ...