图像闪烁然后消失

Image Flashes then disappears

本文关键字：消失 然后 闪烁 图像      更新时间：2023-09-26

我有一些代码在我的web应用程序中加载图像并在网页上渲染它。用户有一个Next和Previous按钮来循环浏览这些图像。这工作得很好。然而，我注意到的是，当用户选择下一步或上一步时，图像加载然后迅速消失。就好像它只是闪了闪，然后又把它拿走了。我想知道这是否与视图状态有关?我试过谷歌搜索，只得到如何使图像闪光的结果。不是阻止它。提前感谢任何有帮助的输入/指导。

  • 假设picPath返回一个正确格式的文件路径来加载图片。
JavaScript: 

    var btnNext = document.getElementById("MainContent_btnNext");
var picPath = document.getElementById("MainContent_Label2");
btnNext.onclick = function () {
    getImage("../.." + picPath.innerHTML);
};
function getImage(imageURL) {
    var img = new Image();
    var imageContainer = document.getElementById("images");
    img.onload = function () {
        imageContainer.appendChild(img);
    };
        img.src = imageURL;
}

ASP。NET/HTML 

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="MarineCorpsGeneral.aspx.cs" Inherits="something.Pictures.USMC.MarineCorpsGeneral" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <link href="../../Styles/Pictures.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
    <br />
    <div id="images">
    </div>
    <br />
    <asp:Button ID="btnPrevious" runat="server" Text="Previous" 
        onclick="btnPrevious_Click" />
    <asp:Button ID="btnNext" runat="server" onclick="btnNext_Click" Text="Next" />
    <script type="text/javascript" src="../../Scripts/loadPictures.js"></script>
</asp:Content>
c#: 

private void getImage(int imageId)
{
    int numberOfImages = 0;
    List<String> imagePaths = new List<String>();
    SqlConnection imageSqlCon = new SqlConnection(ConfigurationManager.ConnectionStrings["myDB"].ConnectionString);
    SqlCommand imageSqlCmd = new SqlCommand();
    SqlDataReader imageReader;
    imageSqlCmd.CommandText = "ASSUME THIS IS A LEGIT QUERY";
    imageSqlCmd.CommandType = CommandType.Text;
    imageSqlCmd.Connection = imageSqlCon;
    imageSqlCon.Open();
    imageReader = imageSqlCmd.ExecuteReader();
    if (imageReader.Read())
    {
        //Count the number of images returned in the query
        while (imageReader.Read())
        {
            numberOfImages += 1;
            imagePaths.Add(imageReader.GetString(0));
        }
    }
    Label2.Text = imagePaths[imageId].Substring(1, imagePaths[imageId].Length - 1);
    imageSqlCon.Close();
}
protected void btnNext_Click(object sender, EventArgs e)
{
    if (ViewState["Clicks"] != null)
    {
        clickCount = (int)ViewState["Clicks"] + 1;
    }
    ViewState["Clicks"] = clickCount;
    getImage(clickCount);
}
protected void btnPrevious_Click(object sender, EventArgs e)
{
    if (ViewState["Clicks"] != null)
    {
        clickCount = (int)ViewState["Clicks"] - 1;
    }
    //Label2.Text = clickCount.ToString();
    ViewState["Clicks"] = clickCount;
    if (clickCount >= 0)
    {
        getImage(clickCount);
    }
}

解决方案是不嵌套onload函数。修改下面的代码修复了这个问题:

var theImg = new Image();
var imagePath = "../.." + document.getElementById("MainContent_Label2").innerHTML;
var imageEl = document.getElementById("images");
theImg.src = imagePath;
theImg.onload = function () {
    imageEl.appendChild(theImg);
}

由于每次选择asp.net按钮控件时我都将图像路径提供给JavaScript，因此视图状态会干扰图像的实际加载。因此，图像确实加载了，但随后viewstate会改变并清除它

相关文章：