Jquery 使用Ajax异步加载服务器生成的映像（生成映像需要一段时间）的方法

嘿，伙计们，我到处都在找这个。我正在尝试获取一个图像，该图像在页面/css/其他图像加载到页面上后需要一段时间才能生成并异步加载。此图像实际上是使用JFreeChart生成的图表。我想继续加载页面，但之后会有图表。我以为我在第二个示例中找到了解决方案，但这在IE8中似乎不起作用。它只显示了一个红色的X。在Chrome和Firefox中似乎可以正常工作。我只是想知道有没有更好的办法。我也试过这个插件。这似乎也不起作用

记住这不是一张普通的照片。它在服务器中动态生成，然后提供给页面。谢谢你的帮助

$(window).load(function() {       

    var insertedTable =  $('#pkgLineTable').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "bPaginate": true,
        "bLengthChange": 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>

$（窗口）.load（函数（）{
var insertedTable=$（“#pkgLineTable”）.dataTable({
“bJQueryUI”：没错，
“sPaginationType”：“完整编号”，
“bPaginate”：对，
“bLengthChange”：正确，
“bFilter”：没错，
“bSort”：错误，
“宾福”：没错，
“bAutoWidth”：假，
“bProcessing”：正确，
“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');
});   

加载时不需要测试。事实上，由于您在window.load上调用此函数，#test.load将已经加载，因此您将永远无法获得该事件

以下是您想要的简单版本：

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

假设页面上已经有一个img，ID为“target_image”，可能没有src属性

这可能会根据您的数据存储方式、您想对其执行的操作等而发生变化。不幸的是，我们没有该上下文。

您不需要进行测试即可加载。事实上，由于您在window.load上调用此函数，#test.load将已经加载，因此您将永远无法获得该事件

以下是您想要的简单版本：

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

假设页面上已经有一个img，ID为“target_image”，可能没有src属性

---

这可能会根据您的数据存储方式、您想对其执行的操作等而发生变化。不幸的是，我们没有该上下文。

检查此小提琴并尝试执行相同操作：

---

我认为它可以正常工作

检查这把小提琴，并尝试做同样的事情：

---

我认为它可以正常工作

您是否也使用默认的80端口访问本地主机？也许这是一个跨域问题。您是否使用了正确的内容类型和MIME类型作为响应？IE似乎对此相当挑剔。IE问题可能是一个哑剧问题。我会调查的。我知道IE在弄乱服务器生成的CSV表单后会有多挑剔。那真是一场噩梦。你也在默认的80端口访问本地主机吗？也许这是一个跨域问题。您是否使用了正确的内容类型和MIME类型作为响应？IE似乎对此相当挑剔。IE问题可能是一个哑剧问题。我会调查的。我知道IE在弄乱服务器生成的CSV表单后会有多挑剔。这简直是一场噩梦。这是一个非常简单的方法。唯一的问题是，多个图表是按顺序加载的，因此，如果第一个图表占用的时间最长，它将保留其他图表。这不是真的异步加载，对吗？我在页面上还有其他ajax调用，这取决于我在窗口中的顺序。load是它们被加载的顺序。不理想，但如果不可能，我可以接受。我在原来的帖子中添加了一些代码。在我的代码中，测试的加载时间比test2长得多。因为测试是第一个，所以它会阻止test2的加载。所有请求都会被触发，但您的浏览器会同时执行。。。没有任何东西可以保证第一张图片会在第二张，甚至第四张之后出现。AJAX调用可能也是如此（没有看到它们），只是看起来它们是同步的，因为执行速度可能足够快，第一个调用可以得到第一个响应。您的数据表是在window.load上构建的，这可能是合适的。。。但是你也可以考虑把它移到文档。准备好了，这比Windows。如果使用Ajax数据构建图表，则可以考虑Ajax图表。在我看来，最好的是HighCharts：我经常在dataTable中使用它，唯一的技巧是您需要编写一个转换器来将数据从一个地方移动到另一个地方（因为它们的基本数据语法有些不同）。不过总体来说还是很轻的。我自己的用户测试（小样本）表明，100%的情况下首选Ajax图表，但图表本身是测试的主要焦点。有趣。datatable被移动到window.load，因为它也是一个长时间运行的查询。我不想让它占据页面的其余部分。我实际上也在使用highcharts。我们为使用旧浏览器的用户提供静态图表（Jfreechart）。这是一种非常简单的方法。唯一的问题是，多个图表是按顺序加载的，因此，如果第一个图表占用的时间最长，它将保留其他图表。这不是真的异步加载，对吗？我在页面上还有其他ajax调用，这取决于我在窗口中的顺序。load是它们被加载的顺序。不理想，但如果不可能，我可以接受。我在原来的帖子中添加了一些代码。在我的代码中，测试的加载时间比test2长得多。因为测试是第一个，所以它会阻止test2的加载。所有请求都会被触发，但您的浏览器会同时执行。。。没有什么可以保证第一张图片会在