Load webpage after AJAX completed

Question

I have an ajax call where I get the color scheme of my website. (we have a lot of clients with different schemes, that's why we have to store them in the database).

What I want to achieve is to wait for the ajax call to finish, and only after to load anything on the page. I know there will be a small delay of around 1-2 seconds, but it's the only way to actually hide the process of changing the colors of the text and background color.

Thank you!

It sounds more like you should be getting the colour scheme on the server before you serve the page. That way there is no unnecessary delay in rendering the page, and less requests to your server. — Rory McCrossan, Jun 17 '16 at 08:27
You could have all the content of the page (except perhaps a loading indication) set `display: none`. On return from the AJAX call show it. — Richard, Jun 17 '16 at 08:28
see this [question](http://stackoverflow.com/questions/3709597/wait-until-all-jquery-ajax-requests-are-done) I think this is the best solution — Irakli Gabisonia, Jun 17 '16 at 08:33
AJAX is a mechanism which allows you to load and execute data **after** the page is rendered. If you need information to be loaded **before** the page is rendered, then you can simply do it server-side. — Yeldar Kurmangaliyev, Jun 17 '16 at 08:34
I am using Laravel, how would I work my way around that? I shouldn't pass the data in the view everytime I have to show a view. — SimeriaIonut, Jun 17 '16 at 08:37

score 1 · Answer 1 · answered Jun 17 '16 at 08:48

1

You can hide the body during loading and show it after your ajax request is complete like the code below:

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    </head>
    <body>
        <script>
            document.getElementsByTagName('body')[0].setAttribute("style", "display: none"); //hide the body
        </script>
        <h1><a>Test</a></div>
        <script>
            $( document ).ready(function() {
                $.ajax({
                  url: "your ajax url",,
                  success: function( result ) {
                    $('h1 a').css('color', 'blue'); //process result here like changing the colors of the text and background color.

                    $('body').show();
                  }
                });
            });

        </script>
    </body>
</html>

answered Jun 17 '16 at 08:48

dee.ronin

1,040
12
22

Hi. This is the way I went for and it works, it's just that I know it's not a best practice and there might be some more clever ways to do it. – SimeriaIonut Jun 17 '16 at 08:50
@SimeriaIonut is your ajax returns a url of the scheme? – dee.ronin Jun 17 '16 at 09:20
No, it just returns an object with the keys primary-color, secondary-color and tertiary-color and the values in hex – SimeriaIonut Jun 17 '16 at 09:29
You can also try this answer [link](http://stackoverflow.com/questions/33842557/load-external-script-and-style-files-in-a-spa/33918816#33918816). This will do a request first before loading the page. It uses a stylesheet and script file but I think the concept is the same. You can just igore the api or CORS part. – dee.ronin Jun 17 '16 at 09:36

score 0 · Answer 2 · answered Jun 17 '16 at 09:42

You can hide the body during loading and show it after your ajax request is complete like the code below:

<html>
    <head>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
         <script>
            $(function() {
                $.ajax({
                  url: "your ajax url",,
                  success: function( result ) {

                  },
                  error:function() {
                     redirect to another page.
                  }
                });
            });
        </script>            
    </head>
    <body>
        <h1><a>Test</a></div>
    </body>
</html>

Load webpage after AJAX completed

2 Answers2