的方式，以防止延迟之间的条件呈现苗条

Question

在我的苗条应用程序中，我有一个条件语句，就像这样。如果视频源存在，则呈现video组件，否则始终呈现默认图像。我发现当视频即将加载时，默认图像消失了，并且有一个1-3秒的空白屏幕。有办法防止这种情况发生吗?我不想要这种"滞后"。我只希望图像在视频实际准备好并可以立即显示时消失。

ps:正在从graphql模式中调用videosrc

{#if videoSrc}
<Video src={videoSrc}/>
{:else}
<img alt={imageSrc} src={imageSrc} />
{/if}

Answer 1

我可能会将占位符与视频组件组合在一起，这样可以更容易地组合"根本没有源"的状态。和"尚未加载源文件"。

一旦你有了一个源，你可以把它设置在一个视频元素上，并且仍然可以在视觉上隐藏它，同时监听像canplay或loadeddata这样的事件，只显示玩家。