Way to load server generated image(takes a while to generate) asynchronously using Ajax

Hey guys I've searched far and wide for this. I'm trying to get a image that takes a while to generate to load asynchronously after the page/css/other images have loaded on the page. This image is actually a chart generated using JFreeChart. I want to go ahead and load the page but have the charts come in afterwards. I thought I found the solution in my second example but this doesn't seem to work in IE8. It just shows a red X. It seems to work Ok in Chrome and Firefox. I'm just wondering if there is a better way. I've also tried this plug in. This didn't seem to work either.

http://www.sebastianoarmelibattana.com/projects/jail

   /* $(function () {
        var img = new Image();
        $(img).load(function () {
            $(this).hide();
            $('#loader').removeClass('loading').append(this);
            $(this).fadeIn();
        }).error(function () {

        }).attr('src', 'http://localhost/chart/3074/110/2011-05-15/2011-05-25');
    })
     */
    $(window).load(function() {     
        $("#test").load(function() {
            var img = this;
            $('.'+ID).fadeOut(function() { $(this).html(img); }).fadeIn();
        }).attr("src", 'http://localhost/chart/3074/110/2011-04-15/2011-05-25'); 
    });

Just remember this isn't a normal image. It is generate on the fly in the server and then served to the page. Thanks for your help.

$(window).load(function() {       

    var insertedTable =  $('#pkgLineTable').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "bPaginate": true,
        "bLengthChange":开发者_JAVA百科 true,
        "bFilter": true,
        "bSort": false,
        "bInfo": true,
        "bAutoWidth": false,       
        "bProcessing": true,
        "bServerSide": false,
        "sAjaxSource": '@{Overview.getPkgLineList()}',
        "fnServerData": fnServerObjectToArray(['shortname', 'description', 'lineStatus', 'statusStamp'])          
    });

    $('#test').attr('src', 'http://localhost/chart/3074/110/2011-04-15/2011-05-25');
    $('#test2').attr('src', 'http://localhost/chart/3074/110/2011-05-15/2011-05-25');
});   



<img src="/public/images/ajax-loader.gif" id="test"></img>
<img src="/public/images/ajax-loader.gif" id="test2"></img>

You don't need #test to load. In fact, since you're calling this on window.load, #test.load will have already loaded, so you'll never get the event.

Here's the drop-dead simple version of what you want:

$(window).load(function() {     
    $('#target_image').attr('src', 'http://localhost/chart/3074/110/2011-04-15/2011-05-25');
});

Assumes an img already on the page, with an ID of 'target_image', potentially with no src attribute.

This can change depending on how your data is stored, what you want to do with it, etc. Unfortunately, we don't have that context.

Check this fiddle and try to do the same:

http://jsfiddle.net/byM8g/2/

I think it will work ok