当带有视频的后台div完成加载时，显示整个带有加载的div
当带有视频的后台div完成加载时，显示整个带有加载的div
提问于 2014-09-25 21:32:39
我有一个div，它有一个大小约为6mb的背景视频。我想要显示整个页面，直到该视频完成加载。
我在很多网站上看到过，特别是那些电影(最近的)，他们有背景视频，在他们显示页面之前，有一个加载屏幕。
我如何才能做到这一点？我一直在到处找，但到目前为止还没找到。如果你可以这样叫它，这项技术有没有一个特定的名字？
回答 3
Stack Overflow用户
发布于 2014-09-25 21:36:47
您可以使用jquery来实现此目的，如下所示：
$(window).load(function() {
$('PUT_ID_OF_VIDEO_CONTAINER_HERE').hide();
});Stack Overflow用户
发布于 2014-09-25 21:45:04
我建议像这样的>>>使用jQuery load()的回调函数
<div id=videoHolder></div>
<div id=loadrHolder></div>
<script>
$( document ).ready(function() {
$('#videoHolder').hide();
$('#videoHolder').load( "myVideo.mp4", function() {
$('#videoHolder').show();
$('#loadrHolder').hide();
});
});
</scriptStack Overflow用户
发布于 2014-09-25 22:12:33
如果您使用像jquery.videoBG (http://syddev.com/jquery.videoBG/)这样的库来显示视频，我认为您可以修改代码，以便在加载视频时显示您的页面。
HTML：
<body>
<div id="dvLoading">Loading...</div>
<div id="dvContent" style="display:none"></div>
</body>库中的Javascript：
$video.bind('canplaythrough',function() {
$('#dvLoading').hide();
$('#dvContent').show();
});您可以在此处找到视频元素的事件列表：http://www.w3schools.com/tags/ref_av_dom.asp
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26039947
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号