CODEWITHSUNDEEP
javascripthtml
mwilson
mwilson

Reputation: 12900

Image Flashes then disappears

I have some code within my web application that is loading an image and rendering it on the web page. The user has a Next and Previous button to cycle through these images. This is working fine. However, what I've noticed is that when the user selects Next or Previous, the image loads and then quickly disappears. It's almost like it's just flashing it and then removing it. I am wondering if this has anything to do with view state? I've tried googling and only get results on how to MAKE an image flash. Not prevent it. Thanks in advance for any helpful input/direction.

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);
    }
}

Upvotes: 1

Views: 954

Answers (1)

mwilson
mwilson

Reputation: 12900

Solution was to not have the onload function nested. Modifying code to the following fixed the issue:

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);
}

Since I am feeding the image path to the JavaScript every time an asp.net button control was selected, the view state was messing with the actual loading of the image. So, the image did in fact load, but then the view state would change and clear it.

Upvotes: 1

Related Questions