jquery - 为 Fancybox 2 使用自定义“正在加载...” div？

Question

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

div当 Fancybox 等待内容（ajax 请求）时，是否可以使用我自己的而不是加载程序 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。