Search code examples
javascriptjqueryfastclick.js

Is this a good method to initialise fast click?

I am trying to keep my html clean and hence require libraries / plugins via my app.js file where all javascript / jquery logic happens. I am using FastClick library to ommit 300ms tap delay and initialising it this way.

jQuery(document).ready(function ($) {
    'use strict';

    /* Load and initialize FastClick, ommits 300ms tap delay */
    $.getScript('lib/fastclick.js', function () {
        new FastClick(document.body);
    }); /* END FastClick */

}); /* END jQuery */

Is this making semantic sense and will it be more harmful using this instead of adding fastclick.js file in html page?

Solution

  • It makes semantic sense and judging from the fastclick docs, it doesn't look harmful.

    Include fastclick.js in your JavaScript bundle or add it to your HTML page...

    They are saying that it's safe to include it as a concatenated file or as a standalone. You are free to include the FastClick source code however you see fit.

    Really their documentation over complicates the initialization of FastClick. The document.documentElement property is available the moment JavaScript begins execution, and represents the <html> element. This could be used as the root element for FastClick, negating the need for a DOMContentLoaded or domready event handler:

    new FastClick(document.documentElement);

    No event handlers needed. Now you can respond to clicks as the page is loading if you want, and before the full HTML document has been parsed.

    Edit: @jungy brings up a good point in his comment:

    ... you are waiting till the DOM is ready before downloading the library.

    The complete code example:

    jQuery.getScript("lib/fastclick.js", function() {
    new FastClick(document.documentElement);
});