Fancybox 加载动画不触发答案

【问题标题】：Fancybox loading animation does not triggerFancybox 加载动画不触发
【发布时间】：2012-11-10 19:00:17
【问题描述】：

fancybox 的功能有什么特别的原因吗

$.fancybox.showActivity();

在我的脚本中引发错误？是否有需要调用函数的特定顺序？该功能旨在在内容加载到弹出窗口之前显示加载图像。这是我的代码：

$(".info_button").click(function () {

    var pictid_browse = $(this).parent().find('#pictid').val();
    $.fancybox.showActivity();
    $.ajax({
                url: "ajax.html",
                type: "POST",
                async:false,
                data: ({f:"get_info",pictid:pictid_browse}),
                success: function(data){
    $.fancybox({
                    'autoDimensions'    : false,
                'width'                 : 950,
                'height'                : 'auto',
                'transitionIn'      : 'none',
                'transitionOut'     : 'none'
            });
                $.fancybox({content:data,'autoDimensions':true,'scrolling':'no',});


    }
    });

    return false;
    });

我得到的错误是：

Uncaught TypeError: Object function () {
        F.open.apply( this, arguments );
    } has no method 'showActivity'

或

TypeError: 'undefined' is not a function (evaluating '$.fancybox.showActivity()')

Fancybox 版本：2.1.3

更新：

我不知道发生了什么，但如果我放置

$.fancybox.showLoading();

外面

$(".info_button").click(function () {

然后它会触发并显示动画。但是，一旦我单击了“.info_button”类的项目，我就需要它发生

以下解决方案似乎也不能解决问题：

    $(".info_button").bind('click', function (e) {
  e.stopPropagation(); e.preventDefault();
}

研究表明，如果删除以下代码，就会触发加载：

 $.fancybox({
content:data,
                'autoDimensions'    : true,
            'width'                 : 'auto',
            'height'                : 'auto',
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'scrolling':'no'
        });

这可能意味着当包含在 ajax 函数中时，fancybox 不能正常工作，但是为什么 - 我不知道

【问题讨论】：

更新了我的答案，如果您更新了您的问题，请发表评论。
你现在看到任何错误吗？也许尝试注释掉 .click 函数中的所有内容，只留下 $.fancybox.showLoading(); 行。会发生什么？
但是，如果您查看 firebugs 控制台 (getfirebug.com)，您是否看到任何错误消息（没有注释掉所有内容）？可能是data 不适合fancybox，它会出错。或者，如果您在本地运行，ajax 调用将立即完成，因此您不能期望看到加载图像。我帮你解决了核心问题，这个网站不是用来辅导别人的。
我明白了，但是没有js错误，代码根本没有显示加载图像。我将尝试重建 ajax 调用以适应 fancybox。无论如何，我感谢您的帮助:)

标签： jquery fancybox

【解决方案1】：

fancybox.net 上的 apidock 有点过时了（它适用于 1.x.y）。

所以如果你使用：

您想购买的旧版 1.x.y：$.fancybox.showActivity();
您想购买的较新的 2.x.y：$.fancybox.showLoading();

您可以找到 2.x.y fancyapss.com 文档和资料的文档。他们保持网站“因为两个版本（1.x 和 2.x）有不同的许可方案”（感谢@JFK）。你可以举报，mb 你会从他们那里得到一颗金星 :)

========= 问题更新后回答 ==========

如果没有看到完整的 html 和 js，我无法确定，但您可以尝试：

$(".info_button").bind('click', function (e) {
  e.stopPropagation(); e.preventDefault();
}

【讨论】：

这是一个很好的提示！但是我仍然无法使加载图标出现。不过这次我有 bo js 错误...
你的fancybox版本号是多少？
The apidock on fancybox.net is kinda outdated ...好吧，不是。 fancybox.net 适用于 v1.3.4 及以下版本，fancyapps.com 适用于新版本 2.x 及以上版本。 Fancybox v1.3.x API 选项、方法和回调与 v2.x 不兼容，反之亦然....为您使用的版本使用正确的选项。
我现在想，您缺少加载图标的图像。你确定你也复制了？ fancybox_loading.gif
They keeping up the site cause of SEO I think ：保留两个站点的原因是因为两个版本（1.x 和 2.x）具有不同的许可方案。

【解决方案2】：

你可以这样做

    <style>
     #fancybox-loading{z-index:999999999;}
    </style>



     <script>
                       $.fancybox({
                                'href'          :your_url,  
                                'width'         : 900,
                                'height'        : 600,
                                'scrolling' : 'auto',
                                'type'              : 'iframe',
                                'titleShow'     : false,
                                'onComplete' : function() {
                                    $.fancybox.showActivity();
                                    $('#fancybox-frame').load(function() {
                                        $.fancybox.hideActivity();
                                    });
                                }
                        })
</script>

【讨论】：

【解决方案3】：

问题似乎出在双重幻想框调用中。工作代码如下：

    $('.info_button').bind('click', function() {
    var pictid_browse = $(this).parent().find('#pictid').val();
    $.fancybox.showLoading();
    $.ajax({
        type:"POST",
        cache:false,
        url:"ajax.html",
        data:({f:"get_info",pictid:pictid_browse}),
        success: function(data) {
            $.fancybox({content:data,'autoDimensions':true,'scrolling':'no'});
        }
    });
    return false;
});

【讨论】：