Question

我正在尝试add the PayPal Smart Payment button to my website。用于呈现按钮的HTML容器是通过AJAX请求以及称为AJAX请求的paypal.Buttons.render()的{{1}}方法接收的。现在一切正常，除了按钮需要花费一些时间在网站上渲染并变为活动状态。我想向我的用户暗示该按钮正在渲染或加载中，因此当AJAX请求返回且未显示任何按钮时，他们不会处于黑暗之中。有没有办法知道按钮何时完全呈现？

onsuccess

Answer 1

您可以使用.then（callback），因为render（）返回一个Promise。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises

承诺是代表最终完成或失败的对象   异步操作。由于大多数人是   已经创建的承诺，本指南将说明消耗量   在解释如何创建承诺之前返回了承诺。

本质上，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..."
  });

}

Answer 2

这里有一些建议的方法可以优化按钮的呈现： 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;
}```

如何知道PayPal智能付款按钮是否已完成渲染

2 个答案: