CODEWITHSUNDEEP
javascriptjqueryresttemplate-engine
Sam R.
Sam R.

Reputation: 16450

Dynamic part of web app based on REST API

We have web application which sends REST API request and change the DOM after request is completed. It is all done in jQuery with AJAX calls. But the problem is, all of the dynamic parts of a page has a slight delay to get updated on page refresh. It's like you first see the static elements and then immediately it gets updated. It is noticeable quite a lot.

We wait for $(document).ready so I think that is the issue. Is there a better way of updating HTML before it gets rendered so the user won't notice the change?

Not to mention, most of the data are cached in sessionStorage so it could be read without REST call.

I searched a little bit but I'm not quite sure, do I need a client-side template engine for this? Like Mustache.js?

Upvotes: 0

Views: 96

Answers (2)

Wesley Smith
Wesley Smith

Reputation: 19571

If all you're worried about is the noticeable change when the page updates, you could put everything inside your body tag inside a container div and give it display:none;. Display a loading image on page load then show the container div when the Ajax request is complete.

Upvotes: 1

Wojciech Wąsik
Wojciech Wąsik

Reputation: 83

I don't think it it possible to completely avoid delays caused by ajax requests. You could possibly put some request out of $(document).ready and place it in a head section:

<head>
   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript">
       // some javascipt here, $.getJSON etc.
   </script>
</head>

In this case you have to look out for selecting elements that are not rendered yet (this could cause some unpleasent errors).

Finally I would recommend you to use some loading gif and animations of loaded elements in order to increase user experience. Take a look for example at AngularJS and its animation features here: https://docs.angularjs.org/tutorial/step_12

Upvotes: 1

Related Questions