Changing images src by javascript - cache issue

Question

I am building a web site, using jQuery. Two major things:

I want to change picture (image src) manually, but sometimes the picture isn't changed (I am using right now chrome, but I want a general solution).
Also, I want to get the image width + height, after I load the picture. (The picture is a file from the server - I just use different file name).

When changing the image by JavaScript/jQuery - I realized that when I change the image once, it is kept in memory, so I run into some problems.

I have found that the image is not uploaded the second time due to cache problem, so as I did some workaround, I realized that I need to do JavaScript command such as:

$("#id_image").attr("src", "pictures\\mypicture.jpg" + "?" + Math.random());

That's how I am changing manually the image.

By using the Math.random() I got a second problem:

If I wrote before Math.random() the line:

$("#id_image").width("auto");
$("#id_image").height("auto");

I don't get the height + width after using the Math.random(), so I put another line, and finally my code is:

$("#id_image").width("auto");
$("#id_image").height("auto");
$("#id_image").attr("src", "pictures\\mypicture.jpg");
$("#id_image").attr("src", "pictures\\mypicture.jpg" + "?" + Math.random());
alert("#id_image").width()); // **** returns 0 sometimes due cache
alert("#id_image").height()); // **** returns 0 sometimes due cache

Still, I have some problem (see remarks on asterisk), and I don't know how to always get the width + height of loaded image.

problem is both width() and height() get called before the image finished loading, hence the zeros. Enclose the alerts inside ("#id_image").load() handler. — Petr Čihula
– Petr Čihula, Commented May 31, 2013 at 11:18

A. Wolff · Accepted Answer · 2013-05-31 11:23:11Z

4

You could try setting onload handler before setting image src, this way, even your image is cached, this should give you correct image size:

$("#id_image").on('load',function(){
   alert($(this).width()); 
   alert($(this).height()); 
});
$("#id_image").attr("src", "pictures\mypicture.jpg");

edited May 31, 2013 at 11:23

answered May 31, 2013 at 11:16

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eitan Over a year ago

Cool. That's the right place where I should refer to the width+height. (Otherwise, I may get width=height=0, before it's calculated, especially when I refere to "pictures\\mypicture.jpg" + "?" + Math.random(), which always returns width=height=0 using the previous code of mine). Thanks :)

Eitan Over a year ago

Ok, I did accept your answer. I didn't know first that ther is an option to accept answer.

Pankaj · Accepted Answer · 2017-07-11 10:05:07Z

  VersionNumber = System.Configuration.ConfigurationManager.AppSettings["Version"];

    //Caching Issues For JS
    public static string JSVersionUpdate(string JsFile)
    {
        StringBuilder str = new StringBuilder();
        str.Append(GetQualifiedPath(JsFile));
        str.Append("?Version=");
        str.Append(VersionNumber);
        return str.ToString();
    }

    public static void DiscardVersion()
    {
        VersionNumber = null;
    }

    //get Full Path for JS File
    private static string GetQualifiedPath(string path)
    {
        var httpRequestBase = new System.Web.HttpContextWrapper(System.Web.HttpContext.Current);

        path = path.Replace("~", string.Empty);

        string appPath = string.Empty;
        if (httpRequestBase != null)
        {
            //Formatting the fully qualified website url/name
            appPath = string.Format("{0}://{1}{2}{3}{4}",
                        httpRequestBase.Request.Url.Scheme,
                        httpRequestBase.Request.Url.Host,
                        httpRequestBase.Request.Url.Port == 80 ? string.Empty : ":" + httpRequestBase.Request.Url.Port,
                        httpRequestBase.Request.ApplicationPath,
                        path);
        }
        appPath = appPath.TrimEnd('/');

        return appPath;
    } 
}

In UI Page : script src="JSVersionUpdate("~/Scripts/Application/Abc.js")"

O/p : ~/Scripts/Application/Abc.js/version=1.0

Browser request for JS Files from server only if Version is Different else it will cached out.Now i don't need to tell someone to clear the cache again and again after deployment.Only thing i do is i change Version Number in Web COnfig.

Same can be applied to Image As well !! Hope it Helps

Collectives™ on Stack Overflow

Changing images src by javascript - cache issue

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related