AJAX/PHP – 数据加载完成后回调答案

【问题标题】：AJAX/PHP – callback after finished loading dataAJAX/PHP – 数据加载完成后回调
【发布时间】：2013-07-19 00:26:45
【问题描述】：

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

点击一个按钮，我通过 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…");
        });
    }); 
});

【问题讨论】：

标签： php ajax post callback loaded

【解决方案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('');
    }); 
});

【讨论】：

【解决方案2】：

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

使用success 回调来追加正文，然后使用complete 和error 回调来正确地清除内容。

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

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

【讨论】：

嘿，干杯伙伴！我设法加载数据并显示各种回调。必须在函数中添加“数据”——函数（数据）——并删除错误函数后的分号。我猜回调会按预期触发——只要从 PHP 文件接收到生成的数据（一些 html 标签 [img] 等）。然而，这也意味着，回调成功函数在图像完全呈现在页面上之前被触发——它在收到标签时被触发。此评论也适用于答案 #2。 :)
我已经用你的 cmets 更新了我的答案。是的，success 不会知道您的图像加载时间。也许使用setTimeout() 来延迟加载指示器的移除？或者使用其他代码来检测图像的加载。
我猜 setTimeout() 可以工作，但是每次加载的图像数量并不相同。也许我可以将超时时间与图像计数联系起来。您是否有任何想法可以检测到图像的完成加载？是的，无用的装载机很痛苦。 :)
对不起，我不会，我会用谷歌搜索它，然后从那里开始，看看你的进展如何。

【解决方案3】：

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

Know when images are done loading in AJAX response

【讨论】：