Question

我在标记中有这个。

你好

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

图像播放＆＃39;但是有一个闪烁。我认为解决方案是只更新div背景的URL来解决这个问题？我有，我仍然有一个闪烁。

请有人帮帮我。

由于

Answer 1

检查图像的大小。尺寸越大，渲染所需的越多，闪烁越大。
如果可以，请先加载所有图像，这样就不必到服务器端获取下一张图像。可能会改善感知表现。
尝试使用两个div并以交替方式隐藏/显示它们。这可能会消除由于主要div重新加载而导致的闪烁。

修改

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

这可能会有所帮助; how to create an animated gif in .net

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

1 个答案: