如何停止在ajax計時器圖像閃爍

你好

<script type="text/javascript"> 
    $("#btnPlay").click(function() { 
     Play(); 
    }); 
    var $theDiv = $("#divPlayer"); 
    var request;  
    var _currentFrame = 1; 

    setInterval(function Play() { 
     if (request) request.abort(); 
     request = $.ajax({ 
      type: "POST", 
      url: "Default.aspx/GetNextFrame", 
      data: JSON.stringify({ 
       CurrentFrame: _currentFrame 
      }), 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function (msg) { 
       if (msg.d != "") { 
        $("#divPlayer").css("backgroundImage", "url(" + msg.d + ")"); 
        _currentFrame++; 
       } 
      }, 
      error: function (msg) { 
       var r = jQuery.parseJSON(msg.responseText); 
       alert(r); 
      } 
     }); 
    }, 100);  
</script>

在我後面的代碼我有這樣的：

[WebMethod] 
public static string GetNextFrame(int CurrentFrame) 
{ 
if (HttpContext.Current.Session["Clip"] == null) 
{ 
HttpContext.Current.Session["Clip"] = Directory.GetFiles(@"C:\Portal\Catalogues\000EC902F17F\3\2013\10\6\10\657c2728-c6a5-41d8-bbdf-1815f5b37d5d"); 
} 
string[] _files= (string[]) HttpContext.Current.Session["Clip"]; 
if (CurrentFrame < _files.Length) 
{ 
string _filename = new FileInfo(_files[CurrentFrame]).Name; 
string _imgURL = "\" A URL\""; 
return _imgURL; 
} 
return ""; 
}

的形象 '扮演'，但有一個閃爍。我認爲解決方案只是更新div背景的URL來解決這個問題？我和我仍然有閃爍。

請別人幫我。

感謝

來源

2013-10-07 Andrew Simpson

通過ajax獲取幀將有延遲（=閃爍）。可能是一個糟糕的主意。此外，您的服務器端代碼與此問題無關。 –

@Diodeus那麼，有沒有辦法避免閃爍呢？此外，服務器代碼顯示我如何返回下一個網址，以防萬一有人問「我如何獲得下一個網址」？請解釋它爲什麼不相關？謝謝 –

問題在於你的方法本身，而不是你的服務器代碼正在執行。您需要客戶端上的所有動畫數據/圖像才能順利運行 - 而不是通過AJAX調用。 –

檢查圖像的大小。尺寸越大，渲染越多，閃爍越大。
如果可以，首先加載所有圖像，這樣就不必去服務器端獲取下一張圖像。可能會提高感知性能。
嘗試使用兩個div並以交替方式隱藏/顯示它們。這可能會消除由於主分區重新加載導致的閃爍。

編輯

使用C＃代碼，你可以建立一個GIF動畫，並返回一系列幀的那個來代替。

這可能有幫助; how to create an animated gif in .net

來源

2013-10-07 23:09:32 griegs

感謝您的信息。圖像的大小隻有352x288共9kb，所以它不是我想象的那麼大。圖像的數量可能會超過3000，所以我不會想到在這種情況下加載所有圖像將會很有用。我知道如何使用動畫GIF，並且我曾經使用過一個精靈，但它又是可能需要的圖像數量，這會導致額外的管理。我也認爲div創意是一種「緩存」形式。仍然使用阿賈克斯我認爲這將有可能做到這一點。 –

如何停止在ajax計時器圖像閃爍

回答

相關問題