fancybox - 当 iframe 预加载为 false 时，如何访问初始空白块并更改其样式？

Question

我正在为我的项目使用 Fancybox 3。这是我的代码

modal: true,
iframe: {
    css: {
        width : '900px',
        height: 'auto'
    },
    preload: false 
}

当fancybox开始显示时，它首先显示一个空白的白色块。这个白色块会停留半秒或一两秒，具体取决于内容。请看这个截图：

我想访问它并进行一些自定义。我怎样才能访问它？如何改变它的风格？

Answer 1

这取决于您要自定义的内容。例如，您可以通过以下方式使背景透明：

.fancybox-slide--iframe .fancybox-content,
.fancybox-iframe {
  background: transparent;
}

这是您可以附加的方式，例如，加载图标：

$('[data-fancybox]').fancybox({
  iframe : {
    preload : false
  },
  afterLoad : function(instance, slide) {
    slide.mySpinner = $( instance.opts.spinnerTpl ).appendTo( slide.$slide )
  },
  afterShow : function(instance, slide) {
    slide.mySpinner.remove();
  }
});

演示 - https://codepen.io/anon/pen/rzORYL