Pre-loading technique is very convenient for users when the system needs some times to retrieve data from the server. It makes the user understand that the server is still busy or need some times to get the data. The technique is commonly used with Ajax request dealing with database to load new data and to refresh a specific content or block. In this tutorial, we will share about the pre-loading technique used by Facebook web application. When we talk about Facebook, you will notice about something we usually see when scrolling down the page and when we refresh its page. Its new feed/content loads using a pre-loading technique to inform its users that the feeds or text content is still loading and wait until it finish its loading. Some of you may also think Facebook may use image with GIF type for displaying that animated pre-loader. In fact, that’s not! There is a trick you should know because it’s very nice and easy. Let’s see how to make it works without GIF image!

As most of us have experienced with Facebook, a today-very-popular social network in the world, uses the very user-friendly and most practical features for their social network web system. This tutorial will take a feature, load more data on scroll, which allow users to be able to see more data by just scrolling down. Most of web systems use this feature to display the huge data content or data list with the specific amount of data per scrolling. Doing this will help their website system load data smoothly avoiding of load all data at the first page load.

It is a good idea to show your visitor the exact comment, post, chat, message, etc. about it dates, especially exactly how low they are untill current time. Showing such this detail date information, your website will be more professional and attractive regarding to this clear and accurate date information.

You may have much experiences with facebook social network where date time ago is very common and attractive. This function will calculate the datetime passed by display the accurate date and time passed with short description text (ex. just now, a few seconds ago, 10 seconds ago, 1 minute ago, 1 hour ago, 1 day ago, etc.).

You can also change the text label to be displayed directly in the function and add some more condition as your need. The bellow instruction will show you the function script and assist you to use the function correctly.