Speed Up Google reCAPTCHA With Lazy Load - Async Google reCAPTCHA
File Size: | 40.4 KB |
---|---|
Views Total: | 9765 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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:
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.