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

标签 javascript jquery css semantic-ui

我发现了一个问题。

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

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

谢谢。

最佳答案

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

我会做什么:用 <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>

关于javascript - 视频海报上的事件已加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33799763/

相关文章:

javascript - React 中的 Fetch 在 url 前添加 localhost

javascript - 无法在程序启动时获取隐藏选项

javascript - 根据值更改 <td> <i> CSS

javascript - 将多个事件添加到同一函数会导致超出最大堆栈大小

html - 在我的垂直菜单中悬停时出现边框问题

javascript - 在 JavaScript 中使用 osmtogeojson 处理来自 Overpass API 的数据

javascript - ExtJS 5.0 - 要覆盖哪个函数以添加自定义 CSS?

javascript - 如何使 qtip2 工具提示动态化

css - CSS 选择器应该包含来自 DOM 的元素吗?

css - 调整 vuetify 数据表的宽度 "rows per page"菜单宽度,因为文本被截断