如何在加載承諾對象時添加加載動畫？

我正在使用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

如何在加載承諾對象時添加加載動畫？

回答

相關問題