data uri slowing down page loading

Question

i am using data uri for avatar image on profile page of the site.(i am using asp.net) Profile site is opening quickly but when i click link on profile page, chrome shows uploading message on left bottom corner and it is uploading very slow. i cannot understand what is uploading on profile page. Also i control page load using ispostback property of the profile page. when i remove avatar page loads quickly.

So, my question is i think site is try to upload data uri image every page event so it slows down page. But why it is uploading i cannot understand.

Profile page code:

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            if (Request.Cookies["UserType"] != null)
            {
                Session["UserType"] = Request.Cookies["UserType"].Value;
            }
            if ((string)Session["UserType"] == Contact.EntityLogicalName)
            {
                CrmConnection = ConnectCrm.Single;
                FormsIdentity ident = User.Identity as FormsIdentity;

                if (ident != null)
                {
                   ...
                   ...
                    avatar2.ImageUrl = "/assets/avatars/avatar2.png";
                    IQueryable<Annotation> annotations = AnnotationOperations.SelectAnnotationByObjectId(CrmConnection.Context, new Guid(Id));
                    foreach (var annotation in annotations)
                    {
                        if (annotation.FileName.Contains("avatar"))
                        {
                            avatar2.ImageUrl = "data:image/png;base64," + annotation.DocumentBody;
                            break;
                        }
                    }

                }
            }
            else
            {
                Response.Redirect("~/Default.aspx");
            }
        }
    }

Master page is below when i click button on profile page it calls editprofile page but it comes very slow:

protected void lnbSettings_Click(object sender, EventArgs e)
    {
        if (this.Page.User.Identity.IsAuthenticated)
        {
           ....

            if ((string)Session["UserType"] == Contact.EntityLogicalName)
            {
                Response.Redirect("~/Members/EditProfile.aspx", false);
            }
        }
    }

EditProfile page code:

   protected void Page_Load(object sender, EventArgs e)
    {

        if (Request.Cookies["UserType"] != null)
        {
            Session["UserType"] = Request.Cookies["UserType"].Value;
        }
        if ((string)Session["UserType"] == Contact.EntityLogicalName)
        {
            CrmConnection = ConnectCrm.Single;
            if (!IsPostBack)
            {
                SetFields();
            }
            else
            {
                contact = (Contact)Session["Contact"];
                langArr = (new_yabancidil[])Session["LangArr"];
            }
        }
        else
        {
            Response.Redirect("~/Default.aspx");
        }
    }

score 0 · Answer 1 · answered Oct 01 '13 at 11:34

This line is forcing the browser to include the image data each time:

avatar2.ImageUrl = "data:image/png;base64," + annotation.DocumentBody;

To allow the browser to cache the image, you need to set the image URL to an ASHX file and serve the image bytes to the browser when it asks for it. Because the image URL will be the same for that user across all page loads the browser knows it already has the image and does not need to ask for it again.

Example code for an ashx file:

            Image image = [load image from file here];
            if (image != null)
            {
                image.Save(context.Response.OutputStream, ImageFormat.Png);
            }

data uri slowing down page loading

1 Answers1