How to Dynamically Add a Photo with Labels Underneath So Labels Don't Shift Up & Down

Jan Tervonen 20

I have a simple HTML/ASPx page that loads an image, and then sets a caption underneath in the Page_Load method. The filename of the image is passed as a parameter. The height of the image is unknown at design time.

When loading the page, the labels appear first at the top. After the image appears, then the labels shift underneath the image where I want them to be.

Is there a way to stop the labels from appearing until AFTER the image is shown? As is, the shift is distracting.

Viorel 112.1K Reputation points

2023-01-21T08:12:13.0966667+00:00

To reduce the distracting shifting for your page, not for labels only, maybe you can determine the image size at runtime and assign it to images. Many people used to use the System.Drawing.Image class. If it has sense to avoid recalculations, you can also store the sizes for future use, for performance reasons.
AgaveJoe 26,201 Reputation points

2023-01-21T18:58:30.19+00:00

The image element has a complete which is set to true when the image has loaded. The previous link has source code that seems to match your use case.

Jan Tervonen 20

Viorel, you are correct that if I know the image height before it is displayed, the flickering disappears.

I tested this by adding a parameter for the value of the height.

In ASPX page
<asp:Image ID="LargeImg" runat="server" />
<asp:Label ID="TitleLbl" runat="server></asp:Label>


In ASPX.VB Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load      
        ' Display the image and captions underneath.
        ' Parameters: graphic - the filename of the .jpg image to display.
        '             height - height of the image file.
        Dim FileStr As String
        Dim HeightStr As String
        Dim HeightInt As Integer
        If Page.PreviousPage IsNot Nothing Then
            FileStr = Request.QueryString("graphic")
            HeightStr = Request.QueryString("height")
            HeightInt = Convert.ToInt64(HeightStr)
            If HeightInt <> 0 Then
                LargeImg.Height = HeightInt
            End If
            LargeImg.ImageUrl = "~/Graphics/Large/" + FileStr + ".jpg"
            SetLabels(FileStr)
            End If
    End Sub

Is there a more generic way to do this without having to pass the height as a parameter?

Accepted answer

QiYou-MSFT 4,306 Reputation points Microsoft Vendor

2023-01-23T06:15:10.4733333+00:00
Hi @Jan Tervonen

I would like to make two points:

First: This paragraph of the code you gave is wrong:SetLabels(FileStr)

Second: You can try the following layout：

In ASPX page

<div> <asp:Image ID="LargeImg" runat="server" /> </div> <div> <asp:Label ID="TitleLbl" runat="server></asp:Label> </div>

Best Regards

Qi You

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.
Jan Tervonen 20 Reputation points

2023-01-23T17:43:07.1066667+00:00

Hi Qi You,

The line:

SetLabels(FileStr)

is simply a call to a procedure setting the labels values.

It can be replaced for the purpose of this duscussion to:

TitleLbl.Text = "Image Caption"

I added separate <div> sections as you suggested around the image & label, but this didn't solve the problem. I still have to pass the height of the image as a parameter to position the label underneath without flickering.

QiYou-MSFT 4,306 Reputation points Microsoft Vendor

2023-01-24T03:03:55.34+00:00

Here is my code and demo.

aspx.vb:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load ' Display the image and captions underneath. ' Parameters: graphic - the filename of the .jpg image to display. ' height - height of the image file. Dim FileStr As String 'Dim HeightStr As String 'Dim HeightInt As Integer 'If Page.PreviousPage IsNot Nothing Then FileStr = Request.QueryString("graphic") 'HeightStr = Request.QueryString("height") 'HeightInt = Convert.ToInt64(HeightStr) 'If HeightInt <> 0 Then 'LargeImg.Height = HeightInt 'End If LargeImg.ImageUrl = "Picture/" + FileStr 'LargeImg.ImageUrl = "Picture/" + "PNG6" + ".png" TitleLbl.Text = "Image Caption" 'End If End Sub

aspx:

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> <div> <asp:Image ID="LargeImg" runat="server" AlternateText="No Picture"/> </div> <div> <asp:label runat="server" ID="TitleLbl"></asp:label> </div> </asp:Content>

In this example, regardless of the image uploaded, the title must be below.

Best Regards

Qi You
Sign in to comment

2 additional answers

SurferOnWww 1,906

When loading the page, the labels appear first at the top. After the image appears, then the labels shift underneath the image where I want them to be.

Can the following aspx.cs and aspx simulate what you say above?

aspx.cs

using System;

namespace WebForms1
{
    public partial class WebForm15 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Label1.Text = "ASP.NET MVC";
        }
    }
}

aspx

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeBehind="WebForm15.aspx.cs" Inherits="WebForms1.WebForm15" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        window.addEventListener('DOMContentLoaded', () => {
            let img = document.querySelector('img');

            setTimeout(() => {                
                img.src = "images/image1.jpg";
            }, 1000);
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Image ID="Image1" runat="server" />
        <br />
        <asp:Label ID="Label1" runat="server"></asp:Label>
    </form>
</body>
</html>

If so, remove the Label setting in the Page_Load and set the caption on the load event if the img element by JavaScript, as follows:

aspx.cs

using System;

namespace WebForms1
{
    public partial class WebForm15 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            //Label1.Text = "ASP.NET MVC";
        }
    }
}

aspx

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeBehind="WebForm15.aspx.cs" Inherits="WebForms1.WebForm15" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        window.addEventListener('DOMContentLoaded', () => {
            let img = document.querySelector('img');
            setTimeout(() => {                
                img.src = "images/image1.jpg";
            }, 1000);

            img.addEventListener('load', () => {
                let label = document.querySelector('span');
                label.innerText = "ASP.NET MVC";
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Image ID="Image1" runat="server" />
        <br />
        <asp:Label ID="Label1" runat="server"></asp:Label>
    </form>
</body>
</html>

SurferOnWww 1,906

When loading the page, the labels appear first at the top. After the image appears, then the labels shift underneath the image where I want them to be.

Can the following aspx.cs and aspx simulate what you say above?

aspx.cs

using System;

namespace WebForms1
{
    public partial class WebForm15 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Label1.Text = "ASP.NET MVC";
        }
    }
}

aspx

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeBehind="WebForm15.aspx.cs" Inherits="WebForms1.WebForm15" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        window.addEventListener('DOMContentLoaded', () => {
            let img = document.querySelector('img');

            setTimeout(() => {                
                img.src = "images/image1.jpg";
            }, 1000);
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Image ID="Image1" runat="server" />
        <br />
        <asp:Label ID="Label1" runat="server"></asp:Label>
    </form>
</body>
</html>

If so, remove the Label setting in the Page_Load and set the caption on the load event if the img element by JavaScript, as follows:

aspx.cs

using System;

namespace WebForms1
{
    public partial class WebForm15 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            //Label1.Text = "ASP.NET MVC";
        }
    }
}

aspx

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeBehind="WebForm15.aspx.cs" Inherits="WebForms1.WebForm15" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        window.addEventListener('DOMContentLoaded', () => {
            let img = document.querySelector('img');
            setTimeout(() => {                
                img.src = "images/image1.jpg";
            }, 1000);

            img.addEventListener('load', () => {
                let label = document.querySelector('span');
                label.innerText = "ASP.NET MVC";
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Image ID="Image1" runat="server" />
        <br />
        <asp:Label ID="Label1" runat="server"></asp:Label>
    </form>
</body>
</html>