Question

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

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

Answer 1

阅读文档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…")});      
});

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

Answer 2

您对finished loading...警报的功能是成功回调，因此一旦AJAX调用完成就会执行。这意味着您无需使用$(window).load。

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

这样的事情可以正常工作：

$("#somebutton").click(function(){
    $('#divID').html('Loading...');
    $.post('loadmore.php', {
        somevariable: somevariable
    },
    function(data){
        $("body").append(data);
        $('#divID').html('');
    }); 
});

Answer 3

我设法通过阅读和调整以下文章中的代码来解决我的问题。带有包含自解释变量[imagesLoaded＆gt; = imageCount]的等式的函数load（）就可以了。

Know when images are done loading in AJAX response

AJAX / PHP - 完成加载数据后的回调

3 个答案: