Как ускорить загрузку страницы с несколькими reCaptcha?

Question

[denism300]

На странице есть 15 popup форм.
Прикрутил к ним invisible recaptcha так:

<script type="text/javascript">
    var onloadCallback = function() {
        $(".g-recaptcha").each(function() {
            var el = $(this);
            grecaptcha.render($(el).attr("id"), {
                "sitekey" : SITE_KEY,
                "callback" : function(token) {
                    $(el).parent().find(".g-recaptcha-response").val(token);
                    $(el).parent().submit();
                }
            });
        });
    };
</script>

<form>
    <input type="text" name="example"/>
    <button id="captcha1" class="g-recaptcha">submit form 1</button>
</form>

<form>
    <input type="text" name="example"/>
    <button id="captcha2" class="g-recaptcha">submit form 2</button>
</form>

<script src='https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit' async defer></script>

идею, как реализовать несколько рекапч, взял тут
все ок, все работает, но страница грузится секунд 10 где-то. как можно ускорить?

Answer 1

[Артем Чернявский]

Как вариант, рендерить нужную каптчу только после открытия попапа

Comments

[denism300]

есть где примеры подобного посмотреть? а то пока что знаний не хватает

[Артем Чернявский]

denism300, Какой плагин используете для попапа?

[denism300]

Артем Чернявский, без плагинов, umi.cms

[Артем Чернявский]

denism300, Ну тогда б ссылочку, все равно что-то используется для открытия попапа)

[denism300]

Артем Чернявский, ссылочка
капча сейчас выключена, чтобы страница нормально грузилась

[Артем Чернявский]

Js написан жеско конечно )) В main.js нужно вставить функцию:

function initRecaptcha(modal) {
  var captcha = modal.find(".g-recaptcha");

  grecaptcha.render(captcha.attr("id"), {
    "sitekey" : SITE_KEY,
    "callback" : function(token) {
      captcha.parent().find(".g-recaptcha-response").val(token);
      captcha.parent().submit();
    }
  });
}

И на каждое открытие модалки добавить функцию onOpen как показано ниже:

$('.usluga1_btn').click(function () {
  $('.usluga1_popup').bPopup({
    closeClass: 'close',
    follow: [
      isFollow,
      isFollow
    ],
    onOpen: function() {
      initRecaptcha($(this))
    }
  });
});

[denism300]

Артем Чернявский, срабатывает только один раз, дальше - Uncaught Error: reCAPTCHA has already been rendered in this element

[denism300]

Артем Чернявский, в общем, сделал так:
вызов капчи

var initRec;
function initRecaptcha(modal) {
    var captcha = modal.find(".g-recaptcha");
    initRec = grecaptcha.render(captcha.attr("id"), {
        "sitekey" : "6LekN5cUAAAAAK8F0b2qro4u4UoFiHwW9cXeHkE2",
        "callback" : function(token) {
            captcha.parent().find(".g-recaptcha-response").val(token);
            captcha.parent().submit();
        }
    });
}

$('.usluga1_btn').click(function() {
    $('.usluga1_popup').bPopup({
        closeClass: 'close',
        follow: [isFollow, isFollow],
        onOpen: function() {
            $('#captcha1').before('<div id="recaptcha1" class="g-recaptcha" data-callback="onSubmit" data-size="invisible"></div>');
            initRecaptcha($(this));
        },
        onClose: function() {
            $('#recaptcha1').remove()
            grecaptcha.reset(initRec);
        }			
    });
});

теперь после закрытия модалки блок с капчей удаляется и капча сбрасывается. соответственно, при следующем вызове инициализируется заново.