使用Django刷新页面上的图像,而不刷新整个页面



我正在制作一个接收图像的应用程序。

我用一种非常巧妙的方式制作它,这里是HTML:

<body onload="javascript:setTimeout('location.reload(true);', 1000);" >
<div class="container">
  <img class="img0" src="{{ uno }}"/>
  <img class="img1" src="{{ dos }}"/>
  <img class="img2" src="{{ tres }}"/>
</div>
</body>

这是在views.py:中

def main(request):
  x = get_newest_pics()
  uno = x[-1]
  dos = x[-2]
  tres = x[-3]
  context = { 'uno' : uno, 'dos' : dos, 'tres' : tres }
  return render(request, 'index.html', context)

我相信有更好的方法,但我是Django的新手,我不知道怎么做。在这一点上,页面每秒都在闪烁,显示相同的图像,而实际上我只想在出现新图像时刷新它。有没有一种方法可以一致地调用get_newest_pics()并只刷新图像,而不是整个页面?或者仅仅是一种让页面停止闪烁的方法?

实现这一点的方法是在前端实现ajax,然后每隔一段时间请求新图像,一旦找到新图像,更新显示图像的容器并添加新的(可用的)图像。

看看django-dajaxice库,帮助您正确地将前端"连接"到django。

按照你编写代码的方式,所有三个图像都会同时发送到你的页面,而你的javascript片段实际上只是很快刷新页面,这就是为什么你会看到闪烁的效果。

你可以做一个"破解",为django中的每个图像创建一个单独的视图,然后使用javascript在一个间隔内调用每个视图——这会有相同的最终结果,但在代码方面效率很低。

最新更新