CODEWITHSUNDEEP
javascriptjqueryajaxuser-experience
Johnny Pauling
Johnny Pauling

Reputation: 13407

Smooth content loading, how to do it?

I'm unsure how to refer to this (so I can't search for it by myself), but how does one achieve a smooth page loading (similar to a content prefetching) like when you click on a code page link in github or when you click on another element of the Google plus sidebar?

I mean: I think it's something with javascript and ajax but I can't figure it out, the page loads smoothly without the "refreshing" feeling, and it's surely not flash.

I'm sorry if I'm being unclear, I'll try to explain it better if this doesn't work

Upvotes: 3

Views: 5271

Answers (6)

sno2
sno2

Reputation: 4183

As Anirudh Rayabharam said, it is easy to target the elements that you want to load in with animations with jquery. You could just add a class to all the things that you want to slide into the page onload and target those elements using $('.load-animation').slideDown(200);
You could make sure that the animation starts onload using this code: document.onload = function() { $('.load-animation').slideDown(200); }

Upvotes: 0

Anirudh Rayabharam
Anirudh Rayabharam

Reputation: 747

Simple actually.
Make an AJAX request and show a loader.
Put the response in a hidden element and fade it in using JQuery.

$("#id").fadeIn();

It will definitely feel smooth!!

Upvotes: 1

ClarkeyBoy
ClarkeyBoy

Reputation: 5010

I believe sites like Facebook, which I guess is the kind of site you're referring to, use iFrames to load the content and then get the content and transfer it to another element. This means they don't constantly reload the left menu, header or footer and any chats you have up stay showing.

I personally have just developed a table which loads extra rows as you scroll down (similar to Facebooks news feed, although I doubt they use a table). I just load the new rows into a hidden table, 30 rows at a time, and transfer the rows into the original table. Its a similar principle to the above.

Upvotes: 0

Alexander Schimpf
Alexander Schimpf

Reputation: 2392

There are multiple ways to achieve this effect, but a fairly easy one is to use jQuery (http://jquery.com/) and the jQuery UI tabs plugin (http://jqueryui.com/demos/tabs/). Take a look at the ajax mode part of the documentation on that page.

If you're using ASP.NET Web Forms, you also have the option of using an UpdatePanel (Introduction to the UpdatePanel control).

Upvotes: 0

Max Hudson
Max Hudson

Reputation: 10206

If you're not up to the task of using Ajax to get to page content and html5 to change the URL when something is clicked, you can have the page fade out quickly and then go to the URL (instead of using links use a JavaScript function to fade everything out and then change the window.location)

When a page is loaded you can just fade in quickly again. It will give your transition a similar feel to that of google and you will avoid the "white flash"

Upvotes: 0

LosManos
LosManos

Reputation: 7692

Ajax + Jquery is my bet.
Load the base of the page. Then do Ajax calls to retrieve data and Jquery with transitions(?) to make the GUI update less clunky.

Microsoft has something fresh out of the box they call Single page application if you are on their stack.

Upvotes: 3

Related Questions