防止有条件渲染之间滞后的方法
在我的Svelte应用程序中，我有一个有条件的声明，可以是这样的。 “如果存在视频源，则渲染视频组件，否则始终呈现默认图像”。我发现，当视频即将加载时，默认图像就会消失，并且有一个空白屏幕约为1-3秒。有没有办法防止这种情况？我不想要这个“滞后”。我只希望当视频实际准备就绪并可以立即显示时图像消失。
PS：如果这很重要，则来自GraphQl架构的VideoSRC被调用
{#if videoSrc}
<Video src={videoSrc}/>
{:else}
<img alt={imageSrc} src={imageSrc} />
{/if}
In my svelte app, I have a conditional statement that goes something like this. "If the video source exists, render the Video component, else always render a default image". I am finding that when the video is about to load, the default image goes away and there is a blank screen for like 1-3 seconds. Is there a way to prevent this? I don't want this "lag". I only want the image to disappear when the video is actually ready and can instantly show.
ps: the videosrc is being called from graphql schema if that matters
{#if videoSrc}
<Video src={videoSrc}/>
{:else}
<img alt={imageSrc} src={imageSrc} />
{/if}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我可能会将占位符与视频组件相结合，这将使“根本没有源”和“还没有加载源”结合状态变得更加容易。
一旦获得源，您就可以将其设置在视频元素上，并且在聆听诸如
canplay或loadeddata，然后仅显示播放器。I would probably combine the placeholder with the video component, this would make it easier to combine the states "not having a source at all" and "not having loaded the source yet".
Once you have a source, you can set it on a video element and still visually hide it while listening for events like
canplayorloadeddata, to only show the player then.