One thing that we have started to use a lot, especially with bigger database driven sites is the jQuery load() selector. This handy little function makes it really easy to dynamically load content when a user performs an action. Meaning that the content will not be visible/present when the page loads and jQuery will load it from an external URL, this can reduce server load and increase page loading time.
In this example we are going to use a simple static list as the content to be loaded at the click of a button. First is the jQuery:
$(document).ready(function() { // On the click of the submit button, start the function $("#loadBtn").click(function() { // Append the loading image to the div that the content is being loaded within $("#content").append('<div class="loading" style="display:block;"></div>'); // Load the file within the content div $(this).load("data.html", function(){ // Hide the loading image once the content has been loaded $(".loading", this).hide(); }); }); });
And this is our html:
<input type="submit" id="loadBtn" value="Click Me!" /> <div id="content"></div>
It is a very simple and affective method… Even for beginners!
» Demo Here
» Download Here