如何在加载承诺对象时添加加载动画？

我正在使用JavaScript和jQuery来编写我的网站，但我得到以下问题。如何在加载承诺对象时添加加载动画？

我想睡觉线程并只显示加载动画，直到承诺对象完全加载到我的网站。

我不知道该怎么做，任何人都可以帮忙吗？

@ A.Wolff 因为我有，当我使用的是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; 
}

而且PDFJS.getDocument（URL）将返回一个承诺对象。

但是，问题是当我构造这个类并在主程序中调用getPdfNumOfPages（）函数时。我注意到程序将在“pdfDoc”（promise对象）完成加载之前调用getPdfNumOfPages（）函数。所以我想睡觉线程并在promise对象完成加载之前显示加载动画。所以在加载“pdfDoc”之后，getPdfNumOfPages（）函数将运行。

来源

2014-02-27 Galazzo

你能告诉我们，您目前使用的代码，并在具体的问题是在该代码？ –

你在哪里卡住了，因为基本上没有什么难以在设置承诺时显示加载动画并在承诺完成时将其删除，例如使用'always（）'回调 –

@GeorgeStocker我正在使用的代码被添加在问题中，谢谢。 – Galazzo

编辑：

正如评论指出（感谢A.沃尔夫和弗雷德里克·哈米迪），该解决方案是更好的：低于

// 
// 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) 
});

上解决后的溶液：

只有xhr查询完成时没有错误，此解决方案才够用。

您可以使用$.when

描述：提供一个方法基于一个或多个对象，代表异步事件通常递延对象执行回调函数。

// 
// set loader on here 
// 
$.when($.ajax('/action/to/do')).then(function(response) { 
// reset your loader 
// action completed ;) 
});

来源

2014-02-27 13:18:16

使用此解决方案，如果AJAX请求导致错误，则加载程序不会被解除。正如A.沃尔夫所说，“总是（）”会更适合。另外，'$ .when（）'在这里不是必须的，你可以直接在'$ .ajax（）'返回的promise上调用'then（）'或'always（）'。 –

更新后的帖子;）感谢您的回拨 –

以及你能告诉加载网页上的一个图像发送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 
    } 
});

编码快乐:)

来源

2014-02-27 13:30:07 dreamweiver

如何在加载承诺对象时添加加载动画？

回答

相关问题