Chrome is refusing to animate until all the CSS files have finished loading

I'm facing an issue where I have a small CSS file for a loading animation included in my head section. While downloading a large Angular2 application, I want to display this loading animation. However, it seems that the animation doesn't start until all CSS files are loaded from the server.

<link rel="stylesheet" href="~/dist/load.css" />
<link rel="stylesheet" href="~/dist/vendor.css" />

I've attempted various methods such as loading vendor.css asynchronously, using defer, or a combination of both. I even tried placing it before the closing </body> tag. I also experimented with replacing the animation with a GIF, but the same issue persisted - the animation would only begin once vendor.css was loaded.
When viewing the network tab in Developer Tools and simulating a Slow 3G connection, I noticed that the animation only starts when the vendor.css file is fully loaded. Removing vendor.css allowed the animation to start immediately.

Is there a way for me to initiate the animation before the other CSS file finishes loading?

cssangulargoogle-chromeanimation

Answer №1

After some trial and error, I finally discovered the solution to my problem: inserting this code snippet right before the closing </body> tag worked like a charm:

<script type="text/javascript">
   const head = document.head, link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = "/dist/vendor.css";
    head.appendChild(link);
</script>

Interestingly, although this fix worked for me, it still doesn't fully explain the unusual behavior I encountered in Chrome (and possibly other browsers too).

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

Having trouble getting CSS headers to work smoothly with iPhone?

After creating a web application with CSS, the initial GUI was exactly how I wanted it to be. However, within 3 seconds of loading the page, the GUI would change. The HTML code for my header is as follows: <div id="Slideshow"> <img src="image/s1 ...

htmliosiphonecss

Integrating photospheres into your Squarespace website design

Attempting to incorporate photospheres into my Squarespace website has been a challenge. The Google Maps option is functional, but it doesn't meet my specific requirements and appears like this: <iframe src="https://www.google.com/maps/embed?pb=! ...

htmlcssiframesquarespace

Creating a draggable element that can be reverted once it is added to a list and has a dynamically generated inline style tag

There are numerous questions related to this topic on stackoverflow, such as How to make dynamically added list elements draggable in jQuery? However, I am attempting something unique. I am adding my list elements during the page load as shown below: < ...

javascriptjqueryhtmlcssjquery-ui-draggable

Tips on utilizing the context variable of an EmbeddedViewRef

I'm a bit confused on how to properly utilize the EmbeddedViewRef's context variable in Angular 2. According to the Angular 2 changelog, the context variable replaces the setLocal and getLocal methods for setting local variables in an embedded vi ...

angularangular2-directives

Align two span elements to the right using Bootstrap's float-right class

My task is to align two span elements, one with the Bootstrap 4 class 'close' and the other with class 'badge', to the right. However, whenever I try to float the badge to the right, they end up right next to each other. On the other ha ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

What could be causing my JavaScript calculator to malfunction?

I can't seem to figure out why my calculator is malfunctioning and I'm at a loss as to what the issue might be. I even searched on forums like stackoverflow but couldn't find a solution. It seems like there could be an error in the JavaScrip ...

javascripthtmlcss

Navigation bar set to align in the center

I'm struggling to align the navigation bar I've designed in the center of the page. Here is the HTML Code: <div class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Mr. A</a& ...

htmlcsscenternav

The art of arranging React components

I'm struggling to organize my react components properly and I'm having difficulty with CSS Flexbox. Here are the 3 react components: function App() { return ( <> <div className = "header"> <h1>Connect ...

cssreactjsflexboxreact-component

Tips for asynchronously adding data (requires two iterations) to an API service in Angular

I have a json file structured as follows: { "users": [ { "id": "person1", "information": [ { "first_name": "Mike", "last_name": "Patty" ...

javascriptangulartypescripthttprxjs

Transitioning effect when tapping a link that guides you to a different section of the webpage

Just by reading the title, you can understand my concern. Currently, when I click on "Example 4", the page abruptly scrolls to the h1 of Example 4. It looks so ungraceful, like a sudden boom. I would prefer a smooth scrolling effect. Is it possible to achi ...

javascriptjqueryhtmlcss

How can I keep the CSS3 animation playing even after the hover state ends?

When hovering over the small menu logo on my site, there's a subtle wiggle effect that I really like. However, I would prefer if the animation played all the way through before repeating. Here's the code I'm currently using: Here is my code ...

jqueryhtmlanimationcss

CSS: Aligning content vertically centered

Take a look at the following example: <div class="container"> <div class="box1"></div> <div class="box2"></div> </div> The height of box1 is smaller than that of box2. Is there a way to vertically center box1 w ...

htmlcss

Guide to enabling sass and font modules for a specific functionality within an Angular/Webpack project

Currently facing some challenges with sass in my JHipster project. I'm unsure if what I want to achieve is feasible or if I am missing a step. Any specific advice, general insights, or practical examples would be greatly appreciated. I'm attempt ...

angularwebpacksassjhipster

How can I rearrange the button order in a Bootstrap table?

I'm having trouble getting this attribute to work in the table tag data-buttons-order=['paginationSwitch','refresh','toggle','fullscreen','column'] ...

jquerycsstwitter-bootstrap

Clicking outside the div will cause the div to be hidden

Looking for some help with a jQuery issue. I have a pop-up that opens when a div is clicked, but I want it to close when clicking outside of the div instead of just on the close button. <a class="close-up" href="#" onclick="popup('popUpDiv')" ...

javascriptjqueryhtmlcss

Having trouble executing Selenium in headless mode with Chrome on Windows 7 Enterprise

Attempting to use selenium chrome headless mode on Windows7 enterprise edition with the following setup: from selenium.webdriver.chrome.options import Options options = Options()
 options.add_argument('--headless') 
options.add_argument(&apos ...

pythonseleniumgoogle-chromeheadless

Difficulty modifying the background color of a bar graph in Chart.js within an Ionic 2 Angular2 environment

I've been working with Chart.js in an Ionic2 and Angular2 hybrid app to create a stacked bar graph. However, I'm facing an issue where I can't seem to change the background color or fill color of the bars in the graph. Despite trying out all ...

typescriptangularchart.jsionic2

Do floating divs still wrap even when the container has a no-wrap property?

I've been searching for answers to my questions for hours now, but haven't found a satisfactory solution yet. Can anyone help me out? Here is the link to my jsfiddle: http://jsfiddle.net/foreyez/Mr2ER/ This is the simple markup I am working wit ...

htmlcss

Unexpected resizing of a div due to Vue animation

I'm currently working on a quiz and I'm trying to incorporate some animation effects when users navigate between questions. I've been experimenting with a fade in and out effect, but there seems to be a glitch. Whenever I click the button, t ...

htmlcssvue.jsanimationcss-animations

Clicking on a href link inside a scrollable div-container causes it to malfunction, causing the page to jump

I have a draggable div container that contains dynamically generated content. In order to display this container, I use the following code: $( function() { $( "#dialog-message" ).dialog({ modal: true, height: 400, buttons: { Fertig: functi ...

javascriptjqueryhtmlgoogle-chromefirefox