javascript - 如何更改 Fancybox 预加载器图像？

我想用另一个预加载器替换默认的 Fancybox1.3.4 图像预加载器 (fancy_loading.png)。

Fancybox 预加载器不仅用 css 编码，而且用 javascript 本身编码。
看来，javascript中至少有两个地方:

        _animate_loading = function() {
        if (!loading.is(':visible')){
            clearInterval(loadingTimer);
            return;
        }

        $('div', loading).css('top', (loadingFrame * -40) + 'px');

        loadingFrame = (loadingFrame + 1) % 12;
    };

和

    $.fancybox.showActivity = function() {
    clearInterval(loadingTimer);

    loading.show();
    loadingTimer = setInterval(_animate_loading, 66);
};

$.fancybox.hideActivity = function() {
    loading.hide();
};

因此自定义预加载器也需要修改 javascript。
如何更改fancybox-1.3.4 javascript 以设置自定义预加载器图像？

最佳答案

CSS 声明在这里:

#fancybox-loading div {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 480px;
  background-image: url('fancybox.png');
}

他们正在为背景图像使用 Sprite 并更改背景位置以对其进行动画处理。如果您要使用 loading.gif 图像，则不需要为其设置动画。

您需要更改 background-image 路径、 height 和 width 以满足您的新图像。您可能想要注释掉他们的动画 JS 代码，以免发生冲突。
loading div 在这里声明:

$('body').append(
  tmp = $('<div id="fancybox-tmp"></div>'),
  loading = $('<div id="fancybox-loading"><div></div></div>'),
  overlay = $('<div id="fancybox-overlay"></div>'),
  wrap = $('<div id="fancybox-wrap"></div>')
);

您可以搭载 loading 变量，也可以简单地更改 #fancybox-loading 上的样式。然后，您需要删除对 loadingTimer 和 loadingFrame 的任何引用。注释掉整个函数:

/*_animate_loading = function() {
  if (!loading.is(':visible')){
  clearInterval(loadingTimer);
    return;
  }

  $('div', loading).css('top', (loadingFrame * -40) + 'px');

    loadingFrame = (loadingFrame + 1) % 12;
};*/

修改如下函数:

$.fancybox.showActivity = function() {
  //clearInterval(loadingTimer);

  loading.show();
  //loadingTimer = setInterval(_animate_loading, 66);
};

那应该这样做。您不希望 loading 上有任何 setInterval，因为您不会对其进行动画处理，但您确实希望它有条件地隐藏/显示。

关于javascript - 如何更改 Fancybox 预加载器图像？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9367943/