How to put multiple Captcha on one page?

Question

JavaScript

You need to put several Captch on one page.
I know that there is Google reCaptcha with delayed rendering and the ability to render several captchas on one page, but 2 or more slow down page loading. There was a question of an alternative. In Joomla, the captcha is displayed as a base64 image. So, are there any alternatives to Recaptcha?

Answer 1

I know that there is Google reCaptcha with delayed rendering and the ability to render several captchas on one page, but 2 or more slow down page loading.

Drink them when the need arises.
I have 7 captchas on my landing page, all of them are hidden in expanding forms and are not initialized until the form is expanded (or not initialized at all, if it hasn’t reached them yet).

Answer 2

Several captchas on the page at the same time is not the best interface solution. Turns off users. If you really need just a few captchas, I would do captchas sequentially - solve one - solve the next one.
But, frankly, all this will only slightly complicate parsing / posting / auto-registration or whatever you want to protect yourself from there. All popular captcha engines are solved by one or another special software.
Want to really protect yourself? Create your own unique captcha. And then, this is not for long - the software for solving can be trained in almost everything.

Answer 3

i did it like this

var mysitekey = 'key';
    var gcaptcha = function() {
      $().ready(function() {
        $('.grecaptcha').each(function(index, element) {
          var id = $(this).attr('id');
          window['captcha_'+id] = grecaptcha.render(id, { 'sitekey' : mysitekey });	
        })
      });
    };

<script src="https://www.google.com/recaptcha/api.js?onload=gcaptcha&render=explicit"></script>