2014-10-02 277 views
0

我正在製作一個接收圖像的應用程序。刷新頁面上的圖像,而不用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()並刷新圖像,而不是整個頁面?或者甚至只是一種讓頁面停止閃爍的方法?

回答

1

執行此操作的方法是在您的前端實現ajax,然後一旦發現新圖像就會間隔請求新圖像,更新顯示圖像的容器並添加新圖像(可用) 圖片。

看看django-dajaxice library,以幫助您正確地將前端「接線」到django。

您編寫代碼的方式會將所有三個圖像一次發送到您的頁面,而您的JavaScript代碼段實際上只是非常快速地刷新頁面,這就是您看到閃爍效果的原因。

你可以做一個「hack」併爲每個圖像創建一個單獨的視圖,然後使用javascript調用每個視圖的間隔 - 它將具有相同的最終結果,但在代碼方面效率非常低。