1

以下面的示例 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);
        }
    });
}

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

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

我们想做的是让 Colourbox 默认加载动画，而 ajax 请求正在流失。

编辑：到目前为止的结果

起初我尝试了大卫建议的 iframe 方法：

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

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

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

接下来我尝试从第一个框中删除 iframe 和 html 标签，这意味着加载 giff 在 ajax 请求的整个持续时间内都是可见的 - 但是它也忽略了宽度和高度参数并绘制了一个巨大的颜色框 -仅当 ajax 请求返回时才更正大小，另一个视频再次显示：

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

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

如果我能让它像这样工作，但尺寸正确，那就太完美了——有什么想法吗？

我唯一能想到的就是自己更改 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",
4

1 回答 1

0

如果我正确理解您的需求，以下 $.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);
        }
    })
}
于 2013-03-14T17:22:11.163 回答