Google "reCaptcha" sometimes doesn't get displayed/rendered

Question

Sometimes I have to reload the webpage multiple times till the reCaptcha gets rendered. I and a friend tested both on Firefox and Chrome but the problem is consistent and doesn't seem to depend on the used browser.

The code I use to display my reCaptcha's:

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

<script>
        var CaptchaCallback = function(){
            grecaptcha.render('RecaptchaField1', {'sitekey' : '6LdbWAo..'});
            grecaptcha.render('RecaptchaField2', {'sitekey' : '6LfAVAo..'});
            grecaptcha.render('RecaptchaField3', {'sitekey' : '6LfqWwo..'});
            grecaptcha.render('RecaptchaField4', {'sitekey' : '6Lf4sAo..'});
        };

And later in the forms I just added: <div id="RecaptchaField1"></div> with the correct number.

The forms are allways inside of a bootstrap modal if that cares?

Edit: I deleted the async and defer atributes.

Edit 2: Page that has the problems: http://www.dexquote.com

Answer 1

This problem appeared with me in google maps when initializing the map on hidden div (e.g. a modal). I'd solve this problem by removing the initialization from the page load and initialize each captcha when the modal is being displayed like that:

$(document).ready(function () {
    $('#loginModal').on('shown.bs.modal', function () {
        grecaptcha.render('RecaptchaField1', {'sitekey': '6LdbWAoTAAAAAPvS9AaUUAnT7-UKQMxz6vY4nonV'});
    })
    $('#loginModal').on('hide.bs.modal', function () {
        $("#RecaptchaField1").empty();
    })
});