当iframe preload为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