javascript - 图像闪烁然后消失

Question

我的 Web 应用程序中有一些代码正在加载图像并将其呈现在网页上。用户可以使用“下一个”和“上一个”按钮来循环浏览这些图像。这工作正常。然而，我注意到，当用户选择“下一个”或“上一个”时，图像会加载，然后很快消失。这几乎就像只是闪烁然后将其删除。我想知道这与 View 状态有什么关系吗？我尝试过谷歌搜索，但只得到了如何制作图像闪存的结果。不防之。预先感谢您提供任何有用的意见/指导。

• 假设 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);
    }
}

Answer 1

解决方案是不嵌套 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，因此 View 状态会干扰图像的实际加载。因此，图像实际上确实加载了，但随后 View 状态会发生变化并清除它。