Question

我对Web开发一般都很新，所以这个问题可能会显示出一些缺乏经验。我很抱歉。

工作申请：用户在/ showgraph路由中输入x和y值 - ＆gt; 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（使用Flask）

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

创建加载GIF

Python（Flask） - 为matplotlib生成的图像显示加载消息/ gif（html）

1 个答案: