Python（Flask） - 顯示加載消息/ gif for matplotlib生成圖像（html）

Question

我對一般的web開發相當陌生，所以這個問題可能會顯示出一些缺乏經驗。我很抱歉。

工作申請：用戶在/ showgraph路徑中輸入x和y值 - > matplotlib生成在相同路由中顯示的圖。

這裏是類似我的問題的代碼部分：

HTML：

... 
<form class="graphs" method="POST", action="{{ url_for('showgraph') }}"> 
    <input placeholder="x-value" name="valx" id="xvalue"> 
    <input placeholder="y-value" name="valy" id="yvalue"> 
    <input type="submit" name="showgraph" value="Show Graph" id="inputvalues"> 
</form> 
{% if buttonclick[0]=="Show Graph" %} 
    <img src="{{ url_for('fig', val=val) }}" alt="Image Placeholder" height="400"> 
{% endif %} 
... 

的Python（使用瓶）

@app.route('/fig/<val>', methods=['GET', 'POST']) 
def fig(val): 
    import matplotlib.pyplot as plt 
    import StringIO 
    import ast 
    val=ast.literal_eval(str(val)) 
    x=[float(i) for i in val[0][0].strip('[]').split(',')] 
    y=[float(i) for i in val[1][0].strip('[]').split(',')] 
    fig = plt.figure() 
    ax = fig.add_subplot(1, 1, 1) 
    ax.plot(x,y) 
    img = StringIO.StringIO() 
    fig.savefig(img) 
    img.seek(0) 
    return send_file(img, mimetype='image/png') 


@app.route('/showgraph/',methods=['GET','POST']) 
def showgraph(): 
    valx=(request.form.getlist('valx')) 
    valy=(request.form.getlist('valy')) 
    val='('+str(valx)+','+str(valy)+')' 
    buttonclick=request.form.getlist('showgraph') 
    return render_template("graphs.html",buttonclick=buttonclick,val=val) 

現在，當我輸入一些x和y值（例如，x = [1,2,3]和y = [3,2,1]），頁面首先顯示alt（「圖像佔位符」），然後顯示5或顯示圖像（圖形）6秒鐘。

有沒有辦法來克服這個問題，只顯示加載消息，gif，..？

（我還在工作更高效，更清潔的方法，使輸入值的數組。我能想象這種方法可能看上去有點狡猾一些。）

謝謝！

Answer 1

您可以使用img標籤的lowsrc attribute。取而代之的

<img src="{{ url_for('fig', val=val) }}" alt="Image Placeholder" height="400"> 

嘗試

<img src="{{ url_for('fig', val=val) }}" alt="Image Placeholder" height="400" 
    lowsrc="/images/loading.gif"> 

其中loading.gif是顯示了（可能是動畫？）加載信息的佔位符圖像。

提示：您可以在http://www.ajaxload.info/