Javascript 加载promise对象时如何添加加载动画？

我正在使用JavaScript和jQuery来编写我的网站，但我遇到了以下问题

我想休眠线程并显示加载动画，直到promise对象完全加载到我的网站

我不知道怎么做，有人能帮忙吗

---

@A.沃尔夫 因为我在使用PDF.JS插件时遇到了这个问题。我试图在上面声明一个自定义类

下面是我的自定义类

function WhiteBoardPdf3(canvasContext,url){
this.canvasContext=canvasContext;
this.url=url;
this.pdfOriPromise=PDFJS.getDocument(url);
this.pdfPromise=Promise.cast(this.pdfOriPromise);
this.pdfDoc=null;
/*----Here is the problem------*/
this.pdfPromise.then(function getPdf(_pdfDoc){
    this.pdfDoc=_pdfDoc
});
/*----------------------------*/
this.pageNum=1;
this.scale=1;
this.renderPage(1);
}
WhiteBoardPdf3.prototype.getPdfPromise=function(){
return this.pdfPromise;
}
WhiteBoardPdf3.prototype.renderPage=function(){
var num=this.pageNum;
var scale=this.scale;
var canvasContext=this.canvasContext;
var canvas=canvasContext.canvas;
var canvasClassName=canvas.className;
var allCanvas=document.getElementsByClassName(canvasClassName);
var canvasContainer=document.getElementById("whiteBoardLayerContainer");
this.pdfPromise.then(function getPdf(_pdfDoc){
    _pdfDoc.getPage(num).then(function(page){
        var viewport=page.getViewport(scale);
        for(var i=0;i<allCanvas.length;i++){
            allCanvas[i].height=viewport.height;
            allCanvas[i].width=viewport.width;
        }
        canvasContainer.style.width=viewport.width+'px';
        var renderContext={
            canvasContext: canvasContext,
            viewport: viewport
        }
        page.render(renderContext);
    });
});
}
WhiteBoardPdf3.prototype.getPdfNumOfPages=function(){
this.pdfDoc.numPages;
}

功能白板PDF3（canvasContext，url）{
this.canvasContext=canvasContext；
this.url=url；
this.pdfOriPromise=PDFJS.getDocument（url）；
this.pdfPromise=Promise.cast（this.pdfOriPromise）；
this.pdfDoc=null；
/*----问题就在这里------*/
this.pdfPromise.then（函数getPdf（_pdfDoc）{
this.pdfDoc=\u pdfDoc
});
/*----------------------------*/
这个.pageNum=1；
这个比例=1；
本图为渲染图（1）；
}
WhiteBoardPdf3.prototype.getPdfPromise=function（）{
返回此.pdfPromise；
}
WhiteBoardPdf3.prototype.renderPage=function（）{
var num=this.pageNum；
var-scale=这个.scale；
var canvasContext=this.canvasContext；
var canvas=canvasContext.canvas；
var canvasClassName=canvas.className；
var allCanvas=document.getElementsByClassName（canvasClassName）；
var canvascanner=document.getElementById（“白板层容器”）；
this.pdfPromise.then（函数getPdf（_pdfDoc）{
_pdfDoc.getPage（num）.然后（函数（第页）{
var viewport=page.getViewport（比例）；
对于（var i=0；i编辑：

<img name="loadingImage" id="loadingImg" src="http://www.ppimusic.ie/images/loading_anim.gif "  width="100px" height="100px" />



 $('#loadingImg').hide();
 $.ajax({
   url: "test.html",
   data: {data1:'smile'},
   beforeSend:function() {
       $('#loadingImg').show();
   },
   success:function(response) {
       $('#loadingImg').hide();
       //process the successful response 
   },
   error:function(response) {
       $('#loadingImg').hide();
       //process the error response 
   } 
});

如评论所示（感谢A.Wolff和Frédéric Hamidi），该解决方案更好：

//
// launch loader
// before
//

// make xhr query
var jqxhr = $.ajax({
  url: 'your/action'
});

// call the always promise method, automatically invoked 
// when the $.ajax action is completed
jqxhr.always(function() {
 // stop loader in every situations (success or failure)
});

上一个解决方案后的解决方案如下：

<img name="loadingImage" id="loadingImg" src="http://www.ppimusic.ie/images/loading_anim.gif "  width="100px" height="100px" />



 $('#loadingImg').hide();
 $.ajax({
   url: "test.html",
   data: {data1:'smile'},
   beforeSend:function() {
       $('#loadingImg').show();
   },
   success:function(response) {
       $('#loadingImg').hide();
       //process the successful response 
   },
   error:function(response) {
       $('#loadingImg').hide();
       //process the error response 
   } 
});

只有在xhr查询没有错误的情况下，这个解决方案才足够

当

描述：提供一种基于一个回调函数执行回调函数的方法 一个或多个对象，通常是表示异步的延迟对象 事件

---

您可以在发送ajax请求之前在页面上显示加载的图像，并在收到响应后将其隐藏

HTML代码：

<img name="loadingImage" id="loadingImg" src="http://www.ppimusic.ie/images/loading_anim.gif "  width="100px" height="100px" />



 $('#loadingImg').hide();
 $.ajax({
   url: "test.html",
   data: {data1:'smile'},
   beforeSend:function() {
       $('#loadingImg').show();
   },
   success:function(response) {
       $('#loadingImg').hide();
       //process the successful response 
   },
   error:function(response) {
       $('#loadingImg').hide();
       //process the error response 
   } 
});

$（'#loadingImg'）.hide（）；
$.ajax({
url:“test.html”，
数据：{data1:'smile'}，
beforeSend:function（）{
$（'#loadingImg'）.show（）；
},
成功：功能（响应）{
$（'#loadingImg'）.hide（）；
//处理成功的响应
},
错误：函数（响应）{
$（'#loadingImg'）.hide（）；
//处理错误响应
} 
});

---

快乐编码：）

您能告诉我们您当前使用的代码以及代码中的具体问题在哪里吗？您被困在哪里了，因为基本上在设置承诺时显示加载动画并在承诺完成时删除动画并不困难，例如使用

always（）

callback@GeorgeStocker问题中添加了我当前使用的代码，谢谢。@A.Wolff问题中添加了对我的困境的描述，谢谢您的帮助。使用此解决方案，如果AJAX请求导致错误，加载程序将不会被解除。

always（）正如A.Wolff所建议的那样，

，更合适。另外，

$。当这里不需要（）

时，您可以直接调用

然后（）

或

始终（）

对

$.ajax（）

返回的承诺。