5
\$\begingroup\$

I need to get some scripts from the different social networking site and cache them. I want the function to be asynchronous, and non-blocking.

I have settled with a script, but I am not really sure if it is not overly complicated to do the job.

I did replace a normal for loop, and this method is much faster. I do not know why, but it just is.

// Cached scritps
var cachedScriptPromises = {};

// Location of the scripts
var Scripts : {
    twitter    : '//platform.twitter.com/widgets.js',
    facebook   : 'http://static.ak.fbcdn.net/connect.php/js/FB.Share',
    googleplus : 'https://apis.google.com/js/plusone.js',
    linkedin   : 'http://platform.linkedin.com/in.js'
};

// When the button is clicked all the scripts
// are loaded. The conainers are already
// on the website. They will be filled
// as soon as the script is loaded.
jQuery('a.share-link').click(function(){
    for( var script in Scripts ){
        jQuery.cachedGetScript( Scripts[script] );
    }
});


// Function that get and caches the scripts
jQuery.cachedGetScript = function( script ) {
    if ( !cachedScriptPromises[ script ] ) {
        cachedScriptPromises[ script ] = jQuery.Deferred(function( defer ) {
            jQuery.getScript( script ).then( defer.resolve, defer.reject );
        }).promise();
    }
    return cachedScriptPromises[ script ];
};

Eventually this function can be expanded by adding some before and after actions. The thing is that the files are loaded so quickly that I have removed these features, but I am planning to do this as soon as the project becomes bigger.

Does anyone have any suggestions on making this better? Maybe some adjustments to the code, or go a complete other way with this.

\$\endgroup\$
2
\$\begingroup\$

I believe you don't need to use jquery deferred objects for this task. Just use script tags with sources - they will be downloaded in parallel from CDNs (try to use CDN, its always a good idea). The amount of parallel requests will be limited by browser restrictions.

Since your code just replaces default browser technique, for more sophisticated features (like dependent components, libraries that you really want to defer, because they are not used until some action on the page), use

\$\endgroup\$
  • \$\begingroup\$ I do not understand why using another library would be better. I am trying to minimize the amount of libraries I load on init. I already use jQuery, I think that is more than enough. I am not going to load another YUI or jsload library. As for the CDN, the files are already on CDN's, they files are not downloaded from my server, or am I missing something here. Can you point out some benefits of using another library ? \$\endgroup\$ – Saif Bechan Nov 17 '11 at 23:21
  • \$\begingroup\$ Just as I said, I did not see in the code anything with regards to dependencies of one library on another. If you need it, you will create the whole jsload-like infrastructure yourself. If you don't, you don't need script to load scripts, just load them through <script> tags.. \$\endgroup\$ – Arthur P Nov 18 '11 at 15:14
  • \$\begingroup\$ Ah after a long search and read I finally understand where you are driving at. It is about non-blocking loading of external files. It could also be done with just native javascript, without any library at all. I will read a little more about this, it looks like a good option. Thank for the suggestion. \$\endgroup\$ – Saif Bechan Nov 19 '11 at 7:26
  • \$\begingroup\$ Glad I could help and sorry I couldn't get back to you with more explanations. \$\endgroup\$ – Arthur P Nov 21 '11 at 17:49
  • \$\begingroup\$ Nice read for async script loading igvita.com/2014/05/20/… \$\endgroup\$ – Thomas Junk Jul 25 '14 at 0:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.