javascript - 视频海报上的事件已加载

Question

我发现了一个问题。

我在模态对话框中有一个视频元素，带有海报图像设置。打开模式后，海报未完全加载，因此对话框不大于屏幕，因此模式不可滚动。加载海报图像后，模态将拉伸(stretch)，但如果模态应可滚动，则不会触发应重新计数的事件。

我想过关于视频海报加载的一些事件，但没有找到类似的东西。你会如何解决这个问题？

谢谢。

Answer 1

嘿，关于这个失踪事件的好消息。

我会做什么:用 <img> 预加载图像元素并等待其加载事件。

snippet.log('before:  '+video.getBoundingClientRect().width)
var img = new Image();
img.src = video.getAttribute('poster');
img.onload = function(){snippet.log('loaded: '+video.getBoundingClientRect().width);}

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<video id="video" poster="http://lorempixel.com/800/300"></video>