Make sure that the webpage does not display any content until the stylesheet has been fully loaded by

I am seeking to utilize ng-href for loading different Themes.

One issue I am encountering is that the unstyled content appears before the stylesheet is applied.

I have created a Plunker where I made changes to Line 8 in the last 3 Versions for comparison.

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<link ng-href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<link ng-href="//netdna.bootstrapcdn.com/bootstrap/{{styleVersion}}/css/bootstrap.min.css" rel="stylesheet">

When using ng-href instead of href, you can briefly see the unstyled HTML, which I aim to eliminate.

My question is whether it is possible to wait until the stylesheet is loaded, or if there exists a better solution for this dilemma than using ng-href.

javascriptjqueryhtmlcssangularjs

Answer №1

After receiving feedback on the Plunker from a discussion regarding Dynamically loading CSS in angularjs (loading delay), I made some edits:

The changes include:

  1. Loading a start.css file with:

    html, body{
    display: none
}
  2. Loading your ng-href css
  3. Loading an end.css file that sets the style of the body back to display: block

While it could be considered a hack, it does appear to be effective.

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

When trying to access a URL in a next.js application using the fetch() function, the router encountered an

I recently started working on a frontend project using Next.js v13.4 app router, with an additional backend. I have organized my routes and related functionalities in the api folder within the app directory. However, when I attempt to use the fetch() funct ...

javascriptreactjsnext.jsfetch-apiapp-router

displaying the print_r output of the ajax response

Feel free to modify the title! New and Improved!!! This is main.php $(document).ready(function(e) { $("#searchForm").submit(function(e) { e.preventDefault(); $("#result").load("process_search.php",{"searchKeyID":$("# ...

phpjqueryajax

Adjust the width of the container and rotate the text accordingly

I am looking to display text vertically (like a y-axis chart label) and need the ability to rotate text of varying lengths while keeping it on one line. My attempt to achieve this using CSS3 transforms can be seen in this JSFiddle: .rotate { transform ...

csstransform

What is the reason that em takes precedence over p for font-family?

Take a look at this CSS snippet: * { font-family: Gill Sans, Verdana, Arial, Helvetica, Sans-Serif} p { font-family: Courier; } Now let's consider this HTML markup: <p>Hi there. So <em>very</em> pleased to make your acquaintance. ...

htmlcssfont-family

Problem with padding in Firefox when using jQuery's css() methodInconsistent behavior with padding property in

It has come to my attention that Firefox (specifically v19.0.2) is encountering an issue with the jQuery css() function when attempting to retrieve an element's padding. While using .css('padding-left') seems to be a workaround, it would be ...

jquerycssfirefoxpadding

Error: Unable to assign a value to the statusCode property because it

During the development of my application backend, I encountered an error while working on the user login route. When testing the route using Postman, I received the following error message: UnhandledPromiseRejectionWarning: TypeError: Cannot set propert ...

javascriptnode.jsmongodbapiexpress

AngularJS: Issue with JQuery Slider not Updating Scope Value

I am currently working on a project using AngularJS and I have integrated a jQuery slider into it. However, I am facing an issue where I need to change the value of a select box which is defined in a $scope array, but the functionality is not working as ex ...

javascriptjqueryhtmlangularjs

Setting limits to disable or remove specific times from the time picker input box in Angular

I'm having trouble with a time input box. <input type="time" min="09:00" max="18:00" \> Even though I have set the min and max attributes to values of 09:00 and 18:00 respectively, it doesn't seem to be working properly. I want to ...

javascripthtmlangulartypescript

Are there any methods to utilize Zod for validating that a number contains a maximum of two decimal places?

How can I ensure that a numeric property in my object has only up to 2 decimal digits? For example: 1 // acceptable 1.1 // acceptable 1.11 // acceptable 1.111 // not acceptable Is there a method to achieve this? I checked Zod's documentation and sea ...

javascripttypescriptzod

Please refrain from utilizing MUI - useGridRootProps outside of the DataGrid/DataGridPro component

When we click on "Filter" in the context menu of our DataGrid, we encounter this error. We are working on implementing a component hierarchy for the DataGrid as follows: MigrationJobTable.tsx: return ( <div data-testid='migrationJobTa ...

javascriptreactjsmaterial-uidatagrid

Concealing certain form elements based on the dropdown selection

My goal was to dynamically hide form elements based on the dropdown selection in a form. I managed to achieve that functionality, but encountered an issue when trying to update a record - all fields with entered data would reappear. To hide them again, I h ...

phpjquery

A guide to retrieving data in React with useSWR whenever the state changes

In a specific scenario, I need to be able to choose users from a dropdown menu. Once a user is selected, the app should display that user's data. Upon loading the page, the app fetches the data for the first user in the array allUsers?.[0]: const [us ...

javascriptreactjsnext.jsswr

The $watchCollection function will consistently have the identical object assigned to both the new and old values

When using $watchCollection to monitor an object, how can I determine which property of the object has been changed? The problem I am facing is that in the callback function, the new and old values are both the same objects. Is there a way to watch an obje ...

jqueryangularjs

Determine whether the elements within an array are present on the webpage. If they are, display an alert. If not, reload the page

Initially, I had a userscript designed to search for a specific string within a webpage. If the script failed to locate the string, it would refresh the page after 4 seconds: var item = 'apple'; if(document.body.innerHTML.toString().indexOf(item ...

javascriptjqueryuserscripts

The NG8002 error has occurred, as it is not possible to connect to 'matDatepicker' because it is not a recognized attribute of 'input'

I've come across an issue while working on my Angular 15 application with Angular Material. I'm trying to incorporate a date picker, but after adding the code snippet below, I encountered an error. <mat-form-field appearance="outline" ...

htmlangularangular-materialdatepickerangular15

Directing users to a specific section on another webpage can be accomplished using HTML, JavaScript, or

<nav> <div class='container-fluid'> <h1 class='logo'>Logo</h1> <ul class='list-unstyled naving'> <li><a href='index.html'>Home</a></li> ...

javascriptjqueryhtmlcss

Implementing jQuery autocomplete on dynamically generated fields post page load

I have successfully implemented jQuery UI Autocomplete to fetch data from a DB and populate a form dropdown. However, I am faced with the challenge of adding more form fields dynamically that also need to have the autocomplete feature applied to them. Is ...

javascriptjquery

I am experiencing issues with editing the text field in React Tab as it keeps getting out of focus

Whenever I try to type, the text box loses focus and only allows me to type one letter at a time. Below is the code snippet that I am using: <TabPanel value={value} index={0}> {[...Array(commentCount)].map((item, index) => { return ( & ...

javascriptreactjsmaterial-uitabs

Pass a JavaScript variable to a PHP script using AJAX when a button is clicked, with a dynamically set href attribute

This is the current situation: There is a checkbox on each row of a table that represents some information An initially disabled button becomes enabled when any checkbox is checked The button is enclosed by an <a></a> tag as shown: <a>&l ...

javascriptphphtmljqueryajax

Navigational assistance on the keyboard - Improving Accessibility

My situation involves selecting an option from a dropdown menu on X-page, which triggers the opening of Modal-1 while disabling the background. If a selection is made within Modal-1, it leads to Modal-2. I am facing two issues/questions: Upon opening Moda ...

htmlcssangularaccessibility