Loading HTML response from NodeJS server using AJAX

Question

I am currently making a login interface that posts user data to a NodeJS server. Here is the code for the form.

<form action="http://127.0.0.1:8080/" method="POST" id="login_form">
    <div class="input">
        <input class="input-box" id="username" type="text" name="username" placeholder="Username">
    </div>
    <div class="input">
        <input class="input-box" id="password" type="text" name="password" placeholder="Password">
    </div>
    <input type="submit" class="button blue" value="Login">
</form>

Now the form submission is intercepted by a javascript file that takes the form data and posts it to a NodeJS server using AJAX. The server validates the user login and if successful, returns an HTML page to be loaded using jQuery. Here is the code:

$(document).ready(function(){
    $('#login_form').submit(function(event){
        event.preventDefault();
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $('#login_form').serialize(),
            dataType: 'html',
            success: function(response) {
                $("html").html(response);
            }
         });    
    });
});

Now the login form works properly and loads the HTML response, but with one minor issue. Before the final rendered page (with all the css styles and images) is loaded, all the text on the page gets displayed with no formatting, then the final design is displayed. This gives a strange transition between the login form page and the final user portal. Does anyone know why this might be happening and any solutions to fix it?

I think there's no way to avoid that, as it's a matter of when the browser gets a chance to update the display - but you could put everything you want to display inside an element that is initially invisible, then becomes visible once everything (including CSS files and such) is loaded? — moilejter, Aug 08 '18 at 02:37
Usually people solve it with by hiding elements until the page is fully loaded either by simply setting `display: none` or adding overlay — Yohanes Gultom, Aug 08 '18 at 02:40
@Jason, you can have the CSS applied on the document on beforehand and not having it in the AJAX response. — Abbe, Aug 08 '18 at 02:45

score 0 · Answer 1 · answered Aug 08 '18 at 02:38

This is called FOUC (flash of unstyled content). Here’s an existing answer to avoid it:

https://stackoverflow.com/a/5983338/3044358

Or just google the term. Lots of suggestions.

First thing to try: put your css link tags at the top of the head element

Loading HTML response from NodeJS server using AJAX

1 Answers1