```
$(document).ready(function(){
    $("#submit").click(function() {  

        var startDate = $("#startdate").val();
        var endDate = $("#enddate").val();
        var selected = $("#selected").val();

        $.ajax({
            type: "POST",
            url: "/json/chart",
            data: {
                selected:selected, 
                startDate:startDate, 
                endDate:endDate
            },
            success: function(data) {  

                $("#pkgLineDiv").empty().html("");                  

                $.each(data, function(index) {                         
                    $('#pkgLineDiv').prepend('<img id="'+ index+'" src="/public/images/ajax-loader.gif" /><br />');
                    $('#'+index).attr('src', 'chart/'+ data[index].pkgLineId +'/'+ data[index].wrapSpecId +'/'+ data[index].startDate +'/'+ data[index].endDate);                   
                });                           
            }

        });
        return false;           
    });
}); 

```

This is my code. I'm doing an ajax submit and getting some json data back. I'm then passing this data into a chart url. This chart url is a function that generates an image in the back end. The problem is this could be a long process. A simple ajax loading image doesn't work because the ajax call is quick (gets a quick json array). It's what happens after the ajax call that take a while. What I'm trying to do is get an image to show where the image will be. I can't have a place holder because I don't know how many images are going to be created.

This code will work in IE 8. The animation will not play but at least the image shows up where the final image will be. In Chrome and Firefox (my main testing environments) the image will not show at all. Is there something I am missing here? Thanks.

**EDIT
====

:**

```
      $("#pkgLineDiv").empty().html("");  //Empty all contents of the div to push new chart images       
                $.blockUI();
                $.each(data, function(index) {    

                    var chartUrl = 'chart/'+ data[index].pkgLineId +'/'+ data[index].wrapSpecId +'/'+ data[index].startDate +'/'+ data[index].endDate;  //Build chart URL
                    $('#pkgLineDiv').prepend(''+ data[index].description +'<div><img id="'+ index +'" src="/public/images/ajax-loader4.gif" /></div');

                    $.get(chartUrl, function() {                           
                        $('#'+index).attr('src', chartUrl);  

                        if (index == data.length - 1) {
                            $.unblockUI();   
                        }                       
                    });      
                });

```