详细信息
一个简单的 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
固定加载检查不涵盖多个实例
发表评论
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。