Question

I use the following code to reload an image using jQuery:

//Fetch image associated with new image imap.
var reportID = parseInt($('#ReportSelector').val());

$('#HistoricalChart').bind('load', function () {
    alert("loaded");
    $(this).unbind('load');
    $('#ChartLoading').hide();
    $(this).show();
}).bind('error', function () {
    $(this).unbind('error');
    $('#ChartLoading').hide();
    $('#ChartLoadingError').show();
}).attr('src', '../Chart/HistoricalChart?ReportID=' + reportID);

The last line of this jQuery chain indicates that I wish to change the src attribute of HistoricalChart. I use the following Controller action to do so:

public ActionResult HistoricalChart(int reportID)
{
    LineChart lineChart = (LineChart)Session[string.Format("HistoricalReport: {0}", reportID)];
    MemoryStream memoryStream = lineChart.ConvertToMemoryStream();
    return File(memoryStream, "image/png");
}

This works 100% fine under Chrome. Under IE9, however, this only works the first time. The ‘loaded’ alert fires every time under IE — only the image does not change.

That is, I have a breakpoint set inside of the HistoricalChart method. The first time the HistoricalChart img has src set — the breakpoint is hit. After this, though, the breakpoint does not get hit after calling .attr(‘src’, …).

Ideally I would not have to clear the src attribute, or hide the image, to resolve this issue. I do not want my image to flicker when interacting with it.

Is this a known limitation for IE? Workarounds? Or am I doing something incorrect?

Answer 1

May be you are getting the cached image second time. Try adding a random number to the source url.

$('#HistoricalChart').bind('load', function () {
    alert("loaded");
    $(this).unbind('load');
    $('#ChartLoading').hide();
    $(this).show();
}).bind('error', function () {
    $(this).unbind('error');
    $('#ChartLoading').hide();
    $('#ChartLoadingError').show();
}).attr('src', '../Chart/HistoricalChart?ReportID=' + reportID 
                                                    + "&r=" + Math.random());