Ways to postpone CSS and Script loading once JavaScript has been executed

Question

Ways to postpone CSS and Script loading once JavaScript has been executed

My issue with my backbone.js app is that I have noticed some slow loading files (a .css and a .js) that are causing the page to block until they are fully loaded.

After rendering the backbone view, I am looking for a way to delay the loading of these files until after certain JS has been executed. I have attempted to achieve this in JS with the following code:

view.render()
$('head').append("<script type=...")
$('head').append("<link rel='stylesheet'...")

While this solution works, I have encountered an issue with my CSS (specifically a webfont css) where the page fonts are hidden on Android phones and only appear when the screen is touched.

My question is, is this method of loading CSS and JS after page load considered a poor practice? Are there alternative, more effective approaches to consider?

javascript jquery html css backbone.js

Answer 1

Answer №1

Learn how to dynamically add a script file using JavaScript

if(conditionIsMet){
    // fetch script from server
    $.getScript( "serverPath/script.js", function( data, textStatus, jqxhr ) {
        // perform actions upon successful load
    });
}

Answer 2

Learn how to dynamically add a script file using JavaScript

if(conditionIsMet){
    // fetch script from server
    $.getScript( "serverPath/script.js", function( data, textStatus, jqxhr ) {
        // perform actions upon successful load
    });
}

Answer 3

Answer №2

The main issue at hand is identifying why your JavaScript and CSS files are loading slowly. Is it due to an excessive amount of code within the files, or perhaps they are referencing resources on external sites that are causing delays in loading? If you can optimize these files to improve their loading speed, it would be ideal to load them in the <head> section of your web page.

One potential solution could be to split your stylesheet into two separate parts. Place webfont declarations and essential CSS in a small file that loads at the beginning of the page, while additional optional CSS rules can be placed in a second file that loads after the page has been rendered.

However, I would advise against loading CSS rules after the page has already been rendered. This approach could lead to elements on the page shifting around, especially if you have specified positions or sizes in your CSS rules. It is best practice to load CSS before the page is rendered to prevent users from experiencing visual inconsistencies as the browser processes and displays your CSS rules.

Answer 4

The main issue at hand is identifying why your JavaScript and CSS files are loading slowly. Is it due to an excessive amount of code within the files, or perhaps they are referencing resources on external sites that are causing delays in loading? If you can optimize these files to improve their loading speed, it would be ideal to load them in the <head> section of your web page.

One potential solution could be to split your stylesheet into two separate parts. Place webfont declarations and essential CSS in a small file that loads at the beginning of the page, while additional optional CSS rules can be placed in a second file that loads after the page has been rendered.

However, I would advise against loading CSS rules after the page has already been rendered. This approach could lead to elements on the page shifting around, especially if you have specified positions or sizes in your CSS rules. It is best practice to load CSS before the page is rendered to prevent users from experiencing visual inconsistencies as the browser processes and displays your CSS rules.

Answer 5

Answer №3

The asynchronous loading of CSS is not the issue here; it's actually the JavaScript causing the problem.
Ideally, you should place the JavaScript at the bottom of your page. However, you can also place it in the head or body to prevent it from blocking rendering by adding an async attribute:

< script type="text/javascript" async src="your path">< /script>
If you have multiple files that rely on each other, you can use the async defer attribute like this:
< script type="text/javascript" async defer src="your path">< /script>
< script type="text/javascript" async defer src="your path">< /script>
These files will be executed asynchronously in the specified order after loading.
For more information, you can refer to this link:
http://www.w3.org/TR/html5/scripting-1.html#attr-script-async

Answer 6

The asynchronous loading of CSS is not the issue here; it's actually the JavaScript causing the problem.
Ideally, you should place the JavaScript at the bottom of your page. However, you can also place it in the head or body to prevent it from blocking rendering by adding an async attribute:

< script type="text/javascript" async src="your path">< /script>
If you have multiple files that rely on each other, you can use the async defer attribute like this:
< script type="text/javascript" async defer src="your path">< /script>
< script type="text/javascript" async defer src="your path">< /script>
These files will be executed asynchronously in the specified order after loading.
For more information, you can refer to this link:
http://www.w3.org/TR/html5/scripting-1.html#attr-script-async

Ways to postpone CSS and Script loading once JavaScript has been executed

Answer №1

Answer №2

Answer №3

Similar questions

Javascript onclick events failing to toggle video play/pause functionality

Tips for expanding the HTTP header size within Next.js

Updating JavaScript alert title in Android webview: A guide for developers

Creating Visuals with CSS Gradients: A Tutorial on Generating Images and SVG Files

Adjust the PHP variable's value when loading content via AJAX

Creating Your Own Custom Select with DataTables

Resetting form fields when clicking the "Next" button with the FormToWizard jQuery Plugin

What is the best way to access the current Google account signed in on an Android device using jQuery and Cordova?

Is there a way to customize the pagination layout of primeNG paginator in an Angular project

Please refer to the appropriate manual for your MySQL server version to find the correct syntax for the following statement: `'' , , '', '', '', '', '', '', NOW())' at line 2`

Trigger jQuery event when the value of a select element changes, with the exception

Passing a variable in an AngularJS $http.get() call to retrieve a specific section of a JSON data file

Loop through the elements retrieved by the `getElementsByName` method in

Initiating a server call to fetch data using jQuery's AJAX function

`Enhance Image with a Fresh Hue`

Tips for creating visually appealing tables in ReactJS

Colorbox offers the ability to display or mimic a 'loading' animation for content that is displayed inline

Vuetify Error - "Attempting to access 'extend' property of an undefined object"

contrasting ionic and android software development kits

Assistance with changing styles