javascript - Jquery Colorbox - 保留加载动画，直到单独的 ajax 内容准备好

Question

以下面的 JavaScript 函数为例:

function Admin_AccountDetails(UserID) {
    //$.colorbox({ title: "Loading, Please wait", opacity: "0.5", width: "500px", height: "200px" });
    $.ajax({
        url: "ajax.aspx?ajaxid=3&UserID=" + UserID,
        cache: false,
        success: function(response) {
            $.colorbox({ title: "Account Details (UserID: " + UserID + ")", opacity: "0.5", width: "700px", height: "250px", html: response });
        },
        error: function(xhr) {
            HandleBadAjaxResponse(xhr.status);
        }
    });
}

这个函数的想法是使用我们预先存在的函数加载ajax内容(注意使用HandleBadAjaxResponse()等)并在ColourBox div中显示结果内容。

这可行，但在返回 ajax 内容之前不会显示颜色框。

我们想要做的是在 ajax 请求不断变化的同时让 Colourbox 默认加载动画。

编辑:到目前为止的结果

首先我尝试了David建议的iframe方法:

$.colorbox({ iframe: true, title: "Loading, Please wait", opacity: "0.5", width: "500px", height: "200px", html: " ", fastIframe: false });

然而，这并没有按预期工作，是的，当 ajax 请求运行时，颜色框会立即出现，但因为我们使用了 iframe 和 html: " " 第一个框没有加载 gif - 当 ajax 调用完成并且框调整大小时，加载 gif 会出现一瞬间，我在 ajax 后端代码中注入(inject)了 2 秒的延迟来演示此问题:

http://www.heavencore.co.uk/filehub/Videos/StackOverflow/WithTwoSecondDelay.avi

接下来我尝试从第一个框中删除 iframe 和 html 标签，从某种意义上说，加载 Giff 在 ajax 请求的整个持续时间内都是可见的 - 但它也忽略了宽度和高度参数并绘制了大量的colorbox - 仅当 ajax 请求返回时才更正大小，再次，另一个视频显示了此内容:

$.colorbox({ title: "Loading, Please wait", opacity: "0.5", width: "500px", height: "200px" });

http://www.heavencore.co.uk/filehub/Videos/StackOverflow/AlmostCorrect.avi

如果我能让它像this一样工作但尺寸正确就完美了 - 有什么想法吗？

我唯一能想到的就是更改 ColorBox js 文件本身的默认宽度和高度:

(function ($, document, window) {
    var
    // Default settings object.
    // See http://jacklmoore.com/colorbox for details.
    defaults = {
        transition: "elastic",
        speed: 300,
        width: false,
        initialWidth: "500",
        innerWidth: false,
        maxWidth: false,
        height: false,
        initialHeight: "200",

Answer 1

如果我正确理解您的需求，以下 $.ajax 解决方案应该适合您。实际上，您所需要做的就是在开始通话之前设置颜色框。响应将确定您此时显示的内容，错误回调会自动处理您的逻辑。

function Admin_AccountDetails(UserID) {
    $.colorbox({iframe:true, title: "Loading, Please wait", width: "500px", height: "200px", html: " ", fastIframe:false });

    var url = "ajax.aspx?ajaxid=3&sid=" + Math.random();
    url = url + "&UserID=" + UserID;

    $.ajax({
        type: "GET",
        url: url,
        success: function(response) {
            $.colorbox({ title: "Account Details (UserID: " + UserID + ")", width: "500px", height: "200px", html: response });
        },
        error: function(xhr) {
            HandleBadAjaxResponse(xhr.status);
        }
    })
}