Question

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

我想睡眠线程并仅显示加载动画，直到将promise对象完全加载到我的网站中。

我不知道怎么做，有人可以帮忙吗？

@ 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）将返回一个promise对象。

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

Answer 1

修改

如评论中所示（感谢A. Wolff和FrédéricHamidi），这个解决方案更好：

// // 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

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

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

Answer 2

你可以在发送ajax请求之前在你的页面上显示加载图像，并在收到回复后隐藏它。

HTML CODE：

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

快乐编码：）

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

2 个答案: