修改

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是在后端生成图像的功能。问题是这可能是一个漫长的过程。一个简单的ajax加载图像不起作用，因为ajax调用很快（得到一个快速的json数组）。这是在ajax调用之后需要一段时间发生的事情。我要做的是获取图像以显示图像的位置。我不能拥有占位符，因为我不知道将创建多少图像。

此代码适用于IE 8.动画无法播放，但至少图像会显示最终图像的位置。在Chrome和Firefox（我的主要测试环境）中，图像根本不会显示。这里有什么我想念的吗？感谢。

修改

的：

      $("#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

也许尝试类似http://jquery.malsup.com/block/

中的BlockUI插件

您可以手动设置阻止和解锁屏幕。

jQuery追加gif而ajax调用无法在Chrome，Firefox中运行。在IE中工作（虽然没有动画）

修改

2 个答案: