Question

我发现了一个问题。

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

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

谢谢。

Answer 1

嘿，好好了解这个失踪的事件。

我会做什么：使用<img>元素预加载图像并等待它的loadevent。

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>

加载视频海报的活动

1 个答案: