Question

我的Web应用程序中有一些代码正在加载图像并在网页上呈现它。用户有一个下一个和上一个按钮来循环浏览这些图像。这工作正常。但是，我注意到的是，当用户选择“下一个”或“上一个”时，图像会加载然后快速消失。它几乎就像它只是闪烁它然后删除它。我想知道这是否与视图状态有关？我尝试过谷歌搜索，只得到如何制作图像闪光的结果。不要阻止它。提前感谢任何有用的输入/指示。

假设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，因此视图状态会影响图像的实际加载。因此，图像确实加载了，但是视图状态会改变并清除它。

图像闪烁然后消失

1 个答案: