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

What is the best way to transfer information between different pages in an HTML document?

I am facing a specific requirement where I must transfer form data from one HTML page to another HTML page. The process involves a total of 5 pages, with the user entering data in the following order: 1st page: Name 2nd page: Weight 3rd page: Height 4t ...

javascripthtml

Strange issue with Firefox when utilizing disabled attribute as "disabled"

I found a curious bug in Firefox: Check out (unfortunately not reproducible in jsfiddle) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> < ...

javascriptjqueryhtmlfirefox

Showing data from a MySql database using an HTML table

I am currently working on a pop-up form that captures user data and stores it in a MySQL phpmyadmin table. My goal is to have this data displayed in an HTML table once the popup form is closed. After submitting the form, I am redirected back to the homepag ...

javascriptphpjqueryhtmlmysql

Different ways to update the AutoComplete Style attribute

MuiInput-formControl { margin-top: 16px; Is there a way to reset the marginTop property to zero? I attempted the following method, but it was not successful. MuiFormControlLabel: { marginTop: 0, }, <Autocomplete disabl ...

csstypescriptmaterial-uiautocompletestyles

Code that changes every occurrence of a particular filtered selection of HREF values to a different value

When faced with the limitation in Firefox where links cannot be opened in a new tab if they have a HREF tag diverting to a function, it might be necessary to utilize a script to convert them to an actual HREF. Understanding the functionality of foo: func ...

javascripthtmlhrefgreasemonkey

Is the parameter retrieval method correct or erroneous?

I am looking to retrieve data by clicking a link. Here are the links available: <a class="note" id="' . $data["p_id"] . '" value="1" href="javascript:void(0)">+1</a> <a class="note" id="' . $data["p_id"] . '" value="-1" ...

javascriptjqueryhtmlajax

Trouble with AJAX GET request functionality

I am new to AJAX and attempting to make my first AJAX call. Here is the code I have so far: $.get( "validate.php", { 'userinput':'x'}, function(response) { if( response.status ) alert( "Matches found" ); else alert( "No matches ...

phpjavascriptjqueryajaxget

Leveraging AJAX to transmit a JavaScript variable to PHP within the same webpage

I have a webpage where I want to update a PHP variable based on the value of a name attribute when a user clicks on a link. Here is an example of what I am attempting to accomplish: // PHP <?php $jsVar = $_POST['jsVar']; echo $jsVar; ...

javascriptphpjqueryajax

ag-grid: Emphasize cells in a row when the value of a specific cell differs from the previous row's value

I am interested in implementing conditional formatting that compares each cell in a row to the cell in the previous row. If there is a difference, I would like the row to be highlighted. I am working with ag-grid in AngularJS TypeScript. Is it feasible to ...

angularjsag-grid

Assign a specific index value from a PHP array to a JavaScript variable

Having a large PHP array with 649 indexes, I am looking to assign a specific index value to a JavaScript variable based on another variable. Is there a way to achieve this without loading the entire PHP array onto the client side for speed and security rea ...

phpjavascriptajaxarraysjson

Exploring the magic of jQuery in menu design

I'm currently working on a menu feature where clicking on different tags triggers various effects and CSS changes. However, I've noticed that when I click on a new tag, the previously clicked one doesn't revert back to its original state. It ...

jquerymenuclickhtml-lists

Rails with Ajax: The destroy.js.erb file has been rendered successfully, but the specific div element identified by its id is not being successfully

Trying to implement a feature where users can click an unfollow button to end a friendship using ajax. However, the div does not disappear even though the console indicates that destroy.js.erb was rendered successfully. The expected outcome is for the reco ...

javascriptjqueryruby-on-railsajax

Canvas ctx.drawImage() function not functioning properly

I've encountered an issue while trying to display images in a canvas using my rendering function. Here is the code snippet: function populateSquareImages(){ for(var i = 0, ii = squares.length; i < ii; i++) { if(squares[i].hasImage) { ...

javascripthtmlcanvasdrawimage

After refreshing the page, the data stored in the localStorage array gets replaced

After refreshing the webpage, my localStorage array values are being overwritten. During a session, I am able to update values on the front end, and the array in localStorage gets updated accordingly. However, if multiple inputs are changed during a sessio ...

javascriptarraysjsonobjectlocal-storage

Guide to smoothly scroll to the top of an element containing collapsible panels using Jquery

I've encountered an issue with a series of divs that are set to toggle the state of a collapsible div upon clicking (similar to an accordion widget). The functionality works as intended, but I'm facing a challenge - I want the page to scroll to t ...

javascriptjqueryhtmlscrolltop

React Weather App: difficulties entering specific latitude and longitude for API requests

I have successfully developed an app that displays the eight-day weather forecast for Los Angeles. My next objective is to modify the longitude and latitude in the API request. To achieve this, I added two input fields where users can enter long/lat values ...

javascriptreactjsreact-propsreact-animated-weather

Creating a Dynamic Soundtrack: How to Embed an Audio

Success! I finally figured it out, with a little help from everyone. I've been diving into the world of Audio Playlists in HTML and attempted to follow a tutorial on the topic found here: https://www.youtube.com/watch?v=vtZCMTtP-0Y. However, I encoun ...

javascriptjqueryhtmlcss

Modify an HTML table and record any modifications as POST requests using Javascript

As a beginner in JavaScript and HTML, I am open to corrections if I am not following the correct practices. Recently, I delved into editing an HTML form table. {%extends 'base.html'%} {%block content%} <html> <body> <h4> Search ...

javascripthtmldjango

Entering numerous numerical values across a variety of input fields

My website currently has a form with 6 input fields where visitors need to enter a 6 digit code. To make it easier for them, I want to allow users to simply paste the code we provide into the first input field and have the remaining digits automatically po ...

javascriptjqueryhtmlformswebforms

Obtaining data with jQuery.Ajax technology

I am attempting to retrieve real-time data from a different URL and display it in a text field every second without refreshing the entire page. The content of the URL is constantly changing, so I want the field to update accordingly. However, despite my ef ...

javascriptjqueryhtmlajax