CSS声明：

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

他们使用sprite作为背景图片，并将背景位置更改为动画。如果您要使用 loading.gif 图片，则不需要对其进行动画处理。

They are using a sprite for the background image and changing the background-position to animate it. If you're going to use a loading.gif image, then you won't need to animate it.

您需要更改 background-image 路径， height 和 width 以迎合你的新形象。

You need to change the background-image path, height, and width to cater to your new image. You may want to comment out their JS code for the animation so that it doesn't conflict.

载入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 的任何引用。注释掉整个函数：

You can either piggyback on the loading variable or simply change the styling on #fancybox-loading. You'll then need to remove any reference to loadingTimer and loadingFrame. Comment out this entire function:

/*_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);
};

你不想让加载有任何 setInterval ，因为你不会动画，但你做希望它有条件地隐藏/显示。

That should do it. You don't want loading to have any setInterval on it since you won't be animating it, but you do want it to hide/show conditionally.