Speed Up Google reCAPTCHA With Lazy Load - Async Google reCAPTCHA

A simple JavaScript solution to make Google reCAPTCHA human verification system load faster and improve page load experience.

The Async Google reCAPTCHA jQuery plugin defers the loading of a Google reCAPTCHA until it is scrolled into view.

See Also:

• Speed Up Google Maps With Lazy Load - Async Google Maps

How to use it:

1. Load the Async Google reCAPTCHA plugin's JavaScript after loading the latest jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/async-google-recaptcha.js"></script>

2. Load the following CSS if you need to display a loading indicator while loading the Google reCAPTCHA.

<!-- Default Loading Indicator -->
<link href="css/async-google-recaptcha.css" rel="stylesheet" />
<!-- Loading.io Loading Indicator -->
<link href="css/async-google-recaptcha-cl.css" rel="stylesheet" />
<!-- CSS-Loader Loading Indicator -->
<link href="css/async-google-recaptcha-lio.css" rel="stylesheet" />
<!-- All In One -->
<link href="css/async-google-recaptcha-all.css" rel="stylesheet" />

3. Create a container element to hold the Google reCAPTCHA and insert your own API key pair into the data-sitekey attribute as follows:

<div class="g-recaptcha" data-sitekey="YOUR API KEY"></div>

4. Attach the function asyncReCAPTCHA to the container element and done.

$('.g-recaptcha').asyncReCAPTCHA({
  // options here
});

5. Display a loading indicator in the Google reCAPTCHA's parent container while loading.

// default loading indicator
$('.g-recaptcha').asyncReCAPTCHA({
  spinner: {
    attach: true, 
    remove: true
  }
});

// use Bootstrap 4 loading spinner
$('.g-recaptcha').asyncReCAPTCHA({
  spinner: {
    attach: true, 
    remove: true, 
    type: 'bootstrap', 
    bsSpinnerClass: 'spinner-grow'
  }
});

// or use a custom loading spinner
$('.g-recaptcha').asyncReCAPTCHA({
  spinner: {
    attach: true, 
    remove: true, 
    type: 'custom',
    customSpinner: 'Your Loading Spinner HTML',
    delay: 5000,
    spinnerClass: 'async-recaptcha-spinner',
    spinnerCtnClass: 'async-recaptcha-spinner-ctn',
  }
});

6. Enable the fixHeight option to prevent page jumping.

$('.g-recaptcha').asyncReCAPTCHA({
  fixHeight: true
});

7. Determine an offset to start loading the Google reCAPTCHA. Default: 0.

$('.g-recaptcha').asyncReCAPTCHA({
  offset: -100
});

8. Custom functions.

$('.g-recaptcha').asyncReCAPTCHA({
  // determine if container is in viewport
  // credits @ https://stackoverflow.com/a/33979503/2379196
  isInViewport: function () {

    // container bounds
    var containerTop = $(this).offset().top;
    var containerBottom = containerTop + $(this).outerHeight();

    // viewport bounds
    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    // detect if container is in viewport
    return containerBottom > viewportTop && containerTop + config.offset < viewportBottom;
  },

  // automatically attach inline min-height to prevent reflow
  setHeight: function() {

    // only if height should be fixed inline
    if(config.fixHeight) {

        // iterate over all reCAPTCHA containers
        $(config.containers).each(function () {
            
            // apply default height of 78px
            $(this).attr('style', 'min-height:78px;');
        });
    }
  },

  // remove a predefined spinner from the container of reCAPTCHA
  removeSpinner: function() {

    // remove spinner within parent container
    var hFunc = function() { 
        $(this).parent().find('.' + config.spinner.spinnerCtnClass).remove();
    };

    // wait a specific time in milliseconds before removing spinner
    setTimeout(hFunc.bind(this), config.spinner.delay);
  },

  // attach a predefined spinner to the container of reCAPTCHA
  attachSpinner: function() {
    var spinner = config.spinner;
    var $spinnerDiv, $spinnerCtn;

    // if spinner should be attached
    if(spinner.attach) {

        // iterate over all reCAPTCHA containers
        $(config.containers).each(function () {

            // create bootstrap spinner
            if(spinner.type == 'bootstrap') {

                // create spinner container
                $spinnerDiv = $('<div>').addClass(spinner.bsSpinnerClass + ' ' + spinner.spinnerClass).attr('role', 'status');
                $spinnerDiv.prepend($('<span>').addClass('sr-only').html('Loading...'));

            // create included spinner
            }else if(spinner.type == 'included') {

                // create spinner container
                $spinnerDiv = $('<div>').addClass('simple-spinner' + ' ' + spinner.spinnerClass).attr('role', 'status');

            // create custom spinner
            }else if (spinner.type == 'custom') {

                // create custom spinner element by passed HTML
                $spinnerDiv = $(spinner.customSpinner).addClass(spinner.spinnerClass);
            }

            // create spinner container and prepend to parent container
            $spinnerCtn = $('<div>').addClass(spinner.spinnerCtnClass).prepend($spinnerDiv);
            $(this).parent().prepend($spinnerCtn);
        });
    }
  },

  // append trigger event
  triggerAsyncLoad: function () {
    $(window).on('resize scroll', function() { config.checkAndLoad() });
  },

  // check and load reCAPTCHA(s)
  checkAndLoad: function() { checkAndLoadReCAPTCHA() },

  // before load initiated
  beforeLoad: function() {},

  // after load initiated
  afterLoad: function() {}
  
});

9. Determine the URL to the Google reCAPTCHA library.

$('.g-recaptcha').asyncReCAPTCHA({
  libraryUrl: 'https://www.google.com/recaptcha/api.js'
});

Changelog:

2020-05-06

• Fixed Loaded-check not covers multiple instances

---

This awesome jQuery plugin is developed by thexmanxyz. For more Advanced Usages, please check the demo page or visit the official website.