Question

我搜索了这个，但未在http://fancyapps.com/fancybox/的文档中找到解决方案或任何提及：

当Fancybox正在等待内容（ajax请求）时，是否可以使用我自己的div而不是加载器GIF？

Answer 1

您可以覆盖当前设置为此

的CSS样式

#fancybox-loading div {
    width: 44px;
    height: 44px;
    background: url('fancybox_loading.gif') center center no-repeat;
}

并添加您自己的图片，大小，背景颜色等。然而，为了在添加额外元素等方面实际覆盖内容，您将不得不修改fancybox库来执行此操作。

<强>更新

鉴于您的评论使问题更加清晰，您可以覆盖fancybox库而无需触及库本身。以下是覆盖的示例：

var loadingExtension ={
    oldShowLoading: $.fancybox.showLoading,
    showLoading: function(){
        // You can still call the old loader here below if you want and then manipulate the DOM or you can make your own custom code.
        //this.oldShowLoading();
        // custom code

    } 
};
$.extend($.fancybox, loadingExtension);

以下是原始showLoading()方法

showLoading: function () {
        var el, viewport;

        F.hideLoading();

        el = $('<div id="fancybox-loading"><div></div></div>').click(F.cancel).appendTo('body');

        // If user will press the escape-button, the request will be canceled
        D.bind('keydown.loading', function(e) {
            if ((e.which || e.keyCode) === 27) {
                e.preventDefault();

                F.cancel();
            }
        });

        if (!F.defaults.fixed) {
            viewport = F.getViewport();

            el.css({
                position : 'absolute',
                top  : (viewport.h * 0.5) + viewport.y,
                left : (viewport.w * 0.5) + viewport.x
            });
        }

        F.trigger('onLoading');
    },

这里最关键的一行是el = $('<div id="fancybox-loading"><div></div></div>').click(F.cancel).appendTo('body');您可以更改，但请记住会有相应的hideLoading()方法，目前看起来像这样。

hideLoading: function () {
D.unbind('.loading');

$('#fancybox-loading').remove();
},

您还希望在覆盖中修改，具体取决于您的新内容，而不是加载<div>

考虑到上述内容的覆盖的完整示例如下所示。您可以在库本身之后但在任何其他自定义JS之前包含它。请注意，我已经复制了fancybox库中其他位置的一些引用，例如H, W, D, F变量，因为它们在整个过程中用于简洁。

loadingExtension = {
    oldShowLoading: $.fancybox.showLoading,
    oldHideLoading: $.fancybox.hideLoading,
    showLoading: function () {
        H = $("html");
        W = $(window);
        D = $(document);
        F = $.fancybox;
        var el, viewport;

        F.hideLoading();
        el = $('<div id="fancybox-loading"><div>testing!</div></div>').click(F.cancel).appendTo('body');

        // If user will press the escape-button, the request will be canceled
        D.bind('keydown.loading', function (e) {
            if ((e.which || e.keyCode) === 27) {
                e.preventDefault();

                F.cancel();
            }
        });

        if (!F.defaults.fixed) {
            viewport = F.getViewport();

            el.css({
                position: 'absolute',
                top: (viewport.h * 0.5) + viewport.y,
                left: (viewport.w * 0.5) + viewport.x
            });
        }

        F.trigger('onLoading');
    },
    hideLoading: function () {
        $(document).unbind('.loading');
        $('#fancybox-loading').remove();
    }

};
$.extend($.fancybox, loadingExtension);

希望足够清楚。这是一个工作http://jsfiddle.net/aBCL5/的小提琴，我只使用了前几张图片并更改了一些以使负载更长时间。如果您有任何问题，请告诉我 R上。

为Fancybox 2使用自定义“Loading ...”div？

1 个答案: