jQuery добавляет gif, в то время как вызов ajax не работает в Chrome, Firefox. Работает в IE (без анимации)

Question

$(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;           
    });
}); 

Это мой код. Я делаю отправку ajax и возвращаю некоторые данные json. Затем я передаю эти данные в URL-адрес диаграммы. Этот URL-адрес диаграммы - это функция, которая генерирует изображение на заднем плане. Проблема в том, что это может быть длительным процессом. Простая загрузка изображения ajax не работает, потому что вызов ajax быстрый (получает быстрый массив json). То, что происходит после вызова ajax, занимает некоторое время. Я пытаюсь получить изображение, чтобы показать, где оно будет. У меня не может быть заполнителя, потому что я не знаю, сколько изображений будет создано.

Этот код будет работать в IE 8. Анимация не будет воспроизводиться, но, по крайней мере, изображение показывает, где будет заключительное изображение. В Chrome и Firefox (мои основные среды тестирования) изображение не будет отображаться вообще. Есть что-то, чего я здесь не хватает? Спасибо.

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();   
                        }                       
                    });      
                });

Answer 1

Я раньше этого не делал, поэтому не могу сказать наверняка, но, возможно, попробуйте сначала установить img srcs в loader.gif, а затем сделать ajax-запросы к каждому из данных диаграммы / '+ ... ( то есть изображения диаграммы), затем в случае успеха установите src на изображение диаграммы. Если заголовки графического изображения указывают на то, что клиент может кэшировать этот URL, то я считаю, что он должен работать так, как вы хотите.

Я считаю, что проблема в том, как разные браузеры обрабатывают изменение img src. Если вы не измените src до тех пор, пока не узнаете, что изображение было отрендерено сервером и кэшировано клиентом, у вас все получится.

Примерно так:

$(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 />');

                    var chartUrl = 'chart/'+ data[index].pkgLineId +'/'+ data[index].wrapSpecId +'/'+ data[index].startDate +'/'+ data[index].endDate;

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


                }); // each                           
            } // success

        }); // ajax
        return false;           
    }); // click
});  // ready

Answer 2

Возможно, попробуйте что-то вроде плагина BlockUI из http://jquery.malsup.com/block/

Вы можете вручную установить блокировку и разблокировку экрана.