Jquery 如何在ajax计时器中停止图像闪烁

我有这个标记

<%@ Page Title="" Language="C#" MasterPageFile="~/Cloud.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="Cloud_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server">
    <asp:Button ID="btnPlay" runat="server" Text="Play" ClientIDMode="Static" />
    <div id="divPlayer" style="width: 352px; height: 288px;">hello
    </div>

    <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>
</asp:Content>

你好
$（“#btnPlay”）。单击（函数（）{
Play（）；
});
var$theDiv=$（“#divPlayer”）；
var请求；
var _currentFrame=1；
设置间隔（函数播放（）{
if（request）request.abort（）；
请求=$.ajax({
类型：“POST”，
url:“Default.aspx/GetNextFrame”，
数据：JSON.stringify({
CurrentFrame:\u CurrentFrame
}),
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能（msg）{
如果（msg.d！=“”）{
$（“#divPlayer”）.css（“背景图像”、“url（“+msg.d+”））；
_currentFrame++；
}
},
错误：函数（msg）{
var r=jQuery.parseJSON（msg.responseText）；
警报（r）；
}
});
}, 100);     

在我的代码背后，我有以下内容：

[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 "";
}

[WebMethod]
公共静态字符串GetNextFrame（int CurrentFrame）
{
if（HttpContext.Current.Session[“Clip”]==null）
{
HttpContext.Current.Session[“Clip”]=Directory.GetFiles（@“C:\Portal\cataloges\000EC902F17F\3\2013\10\6\10\657c2728-c6a5-41d8-bbdf-1815f5b37d5d”）；
}
string[]_files=（string[]）HttpContext.Current.Session[“Clip”]；
如果（当前帧<_files.Length）
{
字符串_filename=新文件信息（_files[CurrentFrame]）。名称；
字符串\u imgURL=“\”一个URL\”；
返回图；
}
返回“”；
}

图像“播放”，但有闪烁。我以为解决办法就是更新div背景的URL来解决这个问题？我有过，但我还是会有闪现

检查图像的大小。大小越大，渲染所需的时间越长，闪烁越大

如果可以，请先加载所有映像，这样就不必转到服务器端获取下一个映像。可能会改善感知绩效

尝试使用两个div并交替隐藏/显示它们。这可能会消除由于主div重新加载而引起的闪烁

编辑

使用C#代码，您可以构建一个动画gif并返回它，而不是一系列帧

---

这可能会有所帮助

通过ajax获取帧将有延迟（=闪烁）。可能是个坏主意。另外，您的服务器端代码与这个问题无关。@那么，没有办法避免闪烁了吗？此外，服务器代码显示了我如何返回下一个url，以防有人问“我如何获取下一个url”？请解释为什么它是不相关的？感谢问题在于您的方法本身，而不是您的服务器代码正在执行什么。您需要客户端上的所有动画数据/图像，以使其平稳运行，而不是跨越AJAX调用。@Diodeus Hi，感谢您的响应。当我以另一种方式发布这个问题时，有人告诉我，如果我只是更改url，这是可能的。所以，我这样做了，它闪烁。我发布服务器代码是因为当我问一个问题时，有人问我是如何做的，尽管这与问题焦点无关。因此，为了避免浪费时间，我发布了服务器代码，该代码并不庞大，有助于将其置于上下文中，我不认为这样做是一种巨大的罪恶。你显然认为是……：）但是，您关于在播放之前在客户端上提供它以消除闪烁的评论是正确的。就这点而言，我使用的是一个有效的精灵。所以，我给你一个加号，谢谢你的评论。图像的大小只有352x288，总大小为9kb，所以它没有我想象的那么大。图像的数量可能会超过3000，所以我不认为加载所有图像会有用，我担心在这种情况下。我知道如何使用动画gif，之前我使用过精灵，但同样，可能需要的图像数量会导致额外的管理。我还将div的想法视为一种“缓存”。仍然使用ajax，我认为这样做是可能的。