使用延迟加载加速 Google reCAPTCHA - Async Google reCAPTCHA

使用延迟加载加速 Google reCAPTCHA - Async Google reCAPTCHA

版本:

浏览量:88

最后更新:2021-09-11

应用标签:Jquery插件MAC 软件

推荐指数:

详细信息

一个简单的 JavaScript 解决方案,使Google reCAPTCHA人工验证系统加载速度更快并改善页面加载体验。

异步 Google reCAPTCHA jQuery 插件推迟加载 Google reCAPTCHA,直到它滚动到视图中。

也可以看看:

  • 使用延迟加载加速谷歌地图 - 异步谷歌地图

如何使用它:

1.加载最新的jQuery库后加载Async Google reCAPTCHA插件的JavaScript。

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

2. 如果您需要在加载 Google reCAPTCHA 时显示加载指示器,请加载以下 CSS。

<!-- 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. 创建一个容器元素来保存 Google reCAPTCHA 并将您自己的API 密钥对插入data-sitekey attribute如下:

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

4. 将函数 asyncReCAPTCHA 附加到容器元素并完成。

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

5.加载时在Google reCAPTCHA的父容器中显示加载指示器。

// default loading indicator
$('.g-recaptcha').asyncReCAPTCHA({
  spinner: {
    attach: true,
    remove: true
  }
});
 
// use <a href="https://www.jqueryscript.net/tags.php?/bootstrap 4/"></a><a href="https://www.jqueryscript.net/tags.php?/Bootstrap/">Bootstrap</a> 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、开启fixHeight选项,防止页面跳转。

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

7. 确定开始加载 Google reCAPTCHA 的偏移量。默认值:0。

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

8. 自定义功能。

$('.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. 确定 Google reCAPTCHA 库的 URL。

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

变更日志:

2020-05-06

  • 固定加载检查不涵盖多个实例

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。