Question

嘿伙计们，我为此搜索了很多。我正在尝试获取一个图像，在页面/ css /其他图像加载到页面上之后生成异步加载的图像。该图像实际上是使用JFreeChart生成的图表。我想继续加载页面，但之后会有图表出现。我以为我在第二个例子中找到了解决方案，但这在IE8中似乎不起作用。它只显示一个红色的X.它似乎在Chrome和Firefox中运行正常。我只是想知道是否有更好的方法。我也试过这个插件。这似乎也不起作用。

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

请记住，这不是正常的图像。它在服务器中即时生成，然后提供给页面。谢谢你的帮助。

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

Answer 1

您不需要加载#test。事实上，既然你在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属性。

这可能会改变，具体取决于您的数据存储方式，您想要用它做什么等等。不幸的是，我们没有这种情况。

Answer 2

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

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

我认为它会正常工作

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

2 个答案: