The HTML content retrieved through an ajax service call may appear distorted momentarily until the JavaScript and CSS styles are fully applied

Question

The HTML content retrieved through an ajax service call may appear distorted momentarily until the JavaScript and CSS styles are fully applied

When making a service call using ajax and loading an HTML content on my page, the content includes text, external script calls, and CSS. However, upon loading, the HTML appears distorted for a few seconds before the JS and CSS are applied. Is there a solution to load the HTML with JS and CSS already applied, so it displays correctly immediately?

            $.ajax({
                type: 'POST',    
                url: service-URL,
                crossDomain : _crossDomain,
                contentType : 'text/plain',
                data:JSON.stringify(objReq),
                error:function (xhr, ajaxOptions, thrownError){
                },
                success: function(outputHTML){
                    $("#contentDiv").html(outputHTML);
                }
            });

javascript jquery html css ajax

Answer 1

Answer №1

To prevent this issue, a simple solution is to load CSS and JavaScript files in your main document.

If for any reason you do not want to load them before making an AJAX call in the main document (for instance, to speed up the initial page loading), you can utilize a nested AJAX call like the following:

$.get(resource.url, {cache:true}, function(css) {
   // Setting cache: true will utilize browser cache and load it instantly:

       $("head").append($("<link>",{
          rel: "stylesheet",
          type: "text/css",
          href: resource.url
       }));

}).then(function(){
      // You are now able to make your AJAX call here
});

Answer 2

To prevent this issue, a simple solution is to load CSS and JavaScript files in your main document.

If for any reason you do not want to load them before making an AJAX call in the main document (for instance, to speed up the initial page loading), you can utilize a nested AJAX call like the following:

$.get(resource.url, {cache:true}, function(css) {
   // Setting cache: true will utilize browser cache and load it instantly:

       $("head").append($("<link>",{
          rel: "stylesheet",
          type: "text/css",
          href: resource.url
       }));

}).then(function(){
      // You are now able to make your AJAX call here
});

Answer 3

Answer №2

When utilizing the html() method or setting innerHTML=, you are essentially inserting raw code directly onto your webpage. This can cause a delay as the interpreter needs to process and understand the code afterwards. Instead of this approach, you can opt to apply the content as a DOM element right from the start. One way to do this is by not passing it as plain text, or by creating a documentFragment using

document.createDocumentFragment()

. This fragment acts like an empty Node where you can add child nodes first, then append the entire fragment to the main DOM tree.

Answer 4

When utilizing the html() method or setting innerHTML=, you are essentially inserting raw code directly onto your webpage. This can cause a delay as the interpreter needs to process and understand the code afterwards. Instead of this approach, you can opt to apply the content as a DOM element right from the start. One way to do this is by not passing it as plain text, or by creating a documentFragment using

document.createDocumentFragment()

. This fragment acts like an empty Node where you can add child nodes first, then append the entire fragment to the main DOM tree.

The HTML content retrieved through an ajax service call may appear distorted momentarily until the JavaScript and CSS styles are fully applied

Answer №1

Answer №2

Similar questions

Ignore one specific file when importing all files in Angular 7

The PropertyOverrideConfigurer encountered an issue while processing the key 'dataSource' - The key 'dataSource' is invalid, it was expecting 'beanName.property'

Switch the background color alternately from red to green every second

Tips for identifying if the cursor is hovering over the :before or :after section of an element

What is the method for returning a string array?

Updating every occurrence of a string in the visible text of a webpage: A step-by-step guide

The CSRF token is mysteriously altering in places it should remain unchanged

The attribute 'positive_rule' is not found within the structure '{ addMore(): void; remove(index: any): void;'

Encountering problems with Node Sass versions while trying to import custom scss files into app.js

Sending a string array from jQuery to an ASP.NET Razor website and retrieving it in the server-side code

Instructions on removing an HTML element from a div that has the attribute contentEditable

Displaying data from a database in multiple textboxes using a dropdown list selection in ASP.NET Core MVC

Can you explain the distinction between using router.METHOD() versus router.route() in Express?

Substituting ng-init with scope variables results in failure

Storing Node_modules in a separate directory

When scrolling down a webpage, the background color of the content does not stretch along with the page

Angular Flot Chart Resizing: A Guide to Dynamic Chart S

Encountering a react error following the installation of FontAwesome via npm

Issues with Header and Nav tags functionality in Internet Explorer 11 persist post deployment

A guide on utilizing Xpath to reference a tag within a class