[英]How to know if PayPal Smart Payment Button has finished rendering
我正在尝试将 PayPal Smart Payment 按钮添加到我的网站。 用于再现按钮的HTML容器通过与一个AJAX请求接收paypal.Buttons.render()
调用的方法onsuccess
AJAX请求的。 现在一切正常,除了按钮需要一些时间在网站上呈现并变为活动状态。 我想提示我的用户按钮正在呈现或加载,所以当 AJAX 请求返回并且没有显示按钮时,他们不会留在黑暗中。 有没有办法知道按钮何时完全呈现?
$.ajax({
url: example/foler,
data: data,
success: success(data)
});
function success(data) {
// data = <div id='paypal-button-container'></div>
paypal.Buttons().render('#paypal-button-container');
// Display "Button Loading..."
// Find out if button has completely rendered, then turn off "button loading..."
}
您可以使用 .then(callback) 因为 render() 返回一个 Promise。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises
Promise 是表示异步操作最终完成或失败的对象。 由于大多数人都是已经创建的 Promise 的消费者,本指南将在解释如何创建它们之前解释返回的 Promise 的消费。
本质上,promise 是一个返回的对象,您可以将回调附加到该对象上,而不是将回调传递给函数。
$.ajax({
url: example/foler,
data: data,
success: success(data)
});
function success(data) {
// data = <div id='paypal-button-container'></div>
// Display "Button Loading..."
paypal.Buttons().render('#paypal-button-container').then(function() {
// Button has completely rendered, then turn off "button loading..."
});
}
这里有一些优化按钮渲染的建议方法: https : //developer.paypal.com/docs/checkout/troubleshoot/performance/
您通过 Ajax 获取哪些数据?
如果您在显示按钮之前等待某些条件,请预渲染容器和按钮隐藏,然后在成功回调时显示它们。
或者,如果按钮作为 iframe 加载 - 在这种情况下,请将其包装在 div 中,然后只需使用 css 将加载 gif 指定为 iframe 上的背景图像。
div.button-wrapper-div {
background:url(../images/loader.gif) center center no-repeat;
}```
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.