Question

我有一个Python websocket应用程序，它将图像路径发送到JavaScript HTML文件。收到图像路径后，我将网页的背景图像更改为提供的图像。

我现在遇到的问题是，当背景从旧图像变为新图像时，会出现瞬间闪现的问题。其中，这表明有一段时间（尽管非常简短）加载新图像。

我尝试了各种预加载方法，但我对JavaScript很新，所以我不确定哪种方法可以在两个图像之间实现无缝转换。这是我目前实施的方法：

struct Node   
{
    int v;
    Node * child; 
    // constructor
    Node():v(0),child(NULL){}
};

上面显示了所需的图像（包括我的CSS格式），但过渡是不雅观的。

我也玩过以下方法，这对我来说更有意义，但我无法让它发挥作用。

Private Sub BindGrid()

    Dim dt_SQL_Results As New DataTable

    '' Commenting out to use test data as I have no access to your database
    'Dim da As SqlClient.SqlDataAdapter
    'Dim strSQL2 As String
    'Dim Response As String = ""
    'strSQL2 = "SELECT [Company] FROM [Monetra].[dbo].[tbl_MonetraLogins]"
    'da = New SqlClient.SqlDataAdapter(strSQL2, System.Configuration.ConfigurationManager.AppSettings("MainConnectionString").ToString)
    'da.Fill(dt_SQL_Results)
    '' Commenting out to use test data as I have no access to your database

    '' Comment this block out after you test and uncomment the above code block
    dt_SQL_Results.Columns.Add("Company")
    Dim dr_SQL_Results As DataRow
    For i As Integer = 0 To 5
        dr_SQL_Results = dt_SQL_Results.NewRow
        dr_SQL_Results.Item("Company") = "Company " & i
        dt_SQL_Results.Rows.Add(dr_SQL_Results)
    Next
    'gvTally.DataSource = dt_SQL_Results
    'gvTally.DataBind()
    '' Comment this block out after you test and uncomment the above code block

    Dim dt As New DataTable
    dt.Columns.Add("Company")
    dt.Columns.Add("Submitted")
    dt.Columns.Add("Variance")

    Dim dr As DataRow
    For i As Integer = 0 To dt_SQL_Results.Rows.Count - 1
        dr = dt.NewRow
        dr.Item("Company") = dt_SQL_Results.Rows(i).Item("Company")
        dr.Item("Submitted") = "test"
        dr.Item("Variance") = "test"
        dt.Rows.Add(dr)
    Next

    gvTally.DataSource = dt
    gvTally.DataBind()

End Sub

我不确定如何在第二种方法中的函数之间传递变量。鉴于明确的＆＃39; onload＆＃39;打电话给这种方法，我觉得这可能会提供我之后的功能。

如何预加载图像以便在它们之间无缝转换？

编辑：工作代码发布在下面。感谢@blender指出我正确的方向：）

var NewImage = new Image();
NewImage = message.data; //This is the image string received from Python
document.body.style.backgroundImage = "url('" + NewImage + "')";

Answer 1

你实际上没有传递一个回调函数：

ImageLoadComplete()

您正在传递调用NewImage.onload = ImageLoadComplete;的结果，这意味着您可以立即拨打回叫。不要调用该函数，并且您的代码应该按预期工作（大多数情况下）：

onload

如果从缓存加载图像，您将遇到的一个问题是某些浏览器可能无法调用if (NewImage.complete || NewImage.height > 0) { ImageLoadComplete(); } else { NewImage.onload = ImageLoadComplete; }。如果是这种情况，你必须手动调用回调：

Function TK
{
    param ([int]$OTK)

    $TK = $OTK * 2

    write-host "TK $TK"
}

Function MAT
{
    param ([int]$OMAT)

    $MAT = $OMAT * $TK /5

    write-host "MAT $MAT"
}

在JavaScript中预加载无缝背景图像的图像

1 个答案: