How to avoid long page load when using Jquery Plugins

Introduction

jQuery is great. But the best is the that you can use tons of jQuery plugins for each amazing functionality you want to provide. And you can implement it right away without spending a couple of months doing javascript web development and all the pain in the ass that means (even when Jquery makes your life easier regarding that).

But then comes one problem:, you want autocomplete plugin for some forms, you want blockUI plugins for the ajax calls, you want ClueTip plugin for nice tips/help when people submit forms, you want the form plugin to submit your forms through ajax and if that wasn’t enough, you need to load a 4kb js file full of code to provide some amazing functionality.

That’s great, your site kick ass, but your page takes some times between half a minute and a minute to load, and worst: when someone leaves your page, the browser needs at least 10 seconds to be able to leave your page thanks to all the js code you put over it.

In this article you will find a simple solution to that problem, that works great (at least for me). The only js requirement on my systems are: jquery library & jquery blockUI plugin. Any other plugin/js code I need, I only load it on demand, when the user really need it, and I make that user wait when he want that functionality for the first time, instead of make every user wait even when they don’t need that functionality.

Now the code…

Let’s suppose you have developed a fancy feature on your site which provides some amazing web 2.0 functionality, for that to work you need the ClueTip plugin and a custom js file with all your code.When the user clicks on a link you start your feature by calling startMyFancyFeature(param1,param2).
Then create a load function for your fancy feature called loadMyFancyFeature(param1,param2):


var isLoadedFancyFeature = 0;
function loadMyFancyFeature() {
if ( isLoadedFancyFeature != 1) {
// This user never needed your fancy feature before so you need to load it.
// Block the interface while we load it:
$.blockUI({ message: ‘<h1><img src=”/image_dir/your-loader.gif” />Loading…</h1>’ });
// Then load the ClueTip Plugin
jQuery.getScript( ‘/js/jquery.cluetip.js’, function() {
// This code will run only when cluetip was successfully loaded
// Now load your js code for the fancy feature
jQuery.getScript( ‘/js/mycode.js’, function() {
// Now user is ready to see your feature, unblock the interface and give it to him.
$.unblockUI();
isLoadedFancyFeature = 1;
startMyFancyFeature(param1,param2);
});
});
} else {
// User already loaded Cluetip and your code, just provide the feature.
startMyFancyFeature(param1,param2);
}
}

This is a proof of concept, take it and adapt it to your needs. If it proves useful for you, please leave a comment and let me know it, my karma will be thankful :).

Translations:

Tags: , , ,

WordPress database error: [Can't open file: 'wp_comments.MYI'. (errno: 145)]
SELECT * FROM wp_comments WHERE comment_post_ID = 138 AND comment_approved = '1' ORDER BY comment_date

Leave a Reply