0

（不确定我是否错过了一个已经相似的已回答问题……）

单击按钮时，我通过 PHP/MySQL 从数据库加载各种图像并将其附加到正文（实际图像当然不存储在数据库中，图像的正确选择基于发布的变量）。

我的目标是在按下按钮后显示加载指示器，并在所有图像数据完全加载和显示后隐藏指示器。这可能是一个易于解决的回调问题，但我刚刚开始使用 AJAX。:)

以下是我目前设法提出的代码。我猜 load() 函数在这里不是真的合适吗？

谢谢你的帮助！

$("#somebutton").click(function(){
    alert("fetching…");
    $.post('loadmore.php', {
        somevariable: somevariable
    },
        function(data){
            $("body").append(data);
            $(window).load(function(){
            alert("finished loading…");
        });
    }); 
});
4

3 回答 3

1

阅读文档http://api.jquery.com/jQuery.ajax/

使用success回调来附加正文，然后使用completeanderror回调来正确地清除事情。

$("#somebutton").click(function(){
    alert("fetching…");

    $.post('loadmore.php', {
        somevariable: somevariable
    })
    .success(function(data){$("body").append(data)})
    .error(function(){alert("oh dear")})
    .complete(function(){alert("finished loading…")});      
});

请记住始终保留删除加载器的后备方案 - 没有什么比只有一个加载器更糟糕的了，而且无法从页面中删除它并继续使用应用程序/网站。

于 2013-07-19T00:31:24.093 回答
1

带有finished loading...警报的函数是一个成功回调，因此它会在 AJAX 调用完成后执行。这意味着您不需要使用$(window).load.

此外，您可以html在元素上使用该方法来更改其内容并显示消息。

像这样的东西可以正常工作：

$("#somebutton").click(function(){
    $('#divID').html('Loading...');
    $.post('loadmore.php', {
        somevariable: somevariable
    },
    function(data){
        $("body").append(data);
        $('#divID').html('');
    }); 
});
于 2013-07-19T00:32:21.057 回答
0

通过阅读和调整以下文章中的代码，我设法解决了我的问题。带有包含自解释变量 [imagesLoaded >= imageCount] 的方程的函数 load() 起到了作用。

知道图像何时在 AJAX 响应中完成加载

于 2013-07-19T01:43:56.463 回答