0

我在标记中有这个。

<%@ 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>

在我背后的代码中，我有这个：

[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 来解决这个问题？我有，我仍然得到一个闪烁。

4

1 回答 1

1
  1. 检查图像的大小。尺寸越大，渲染所需的时间就越多，闪烁也越大。
  2. 如果可以，请先加载所有图像，这样您就不必去服务器端获取下一个图像。可能会提高感知性能。
  3. 尝试使用两个 div 并以交替的方式隐藏/显示它们。这可能会消除由于主 div 重新加载而导致的闪烁。

编辑

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

这可能会有所帮助；如何在 .net 中创建动画 gif

于 2013-10-07T23:09:32.080 回答