帶有視頻的背景div完成加載后，顯示加載時的整個div
[英]While background div with video finishes loading, show entire div with loading
問題描述
我有一個div，其背景視頻的大小約為6mb。 我要顯示整個頁面，直到該視頻加載完成。
我在很多網站上都看到過，特別是那些帶有背景視頻的電影（最近的），在它們顯示頁面之前，就像是一個加載屏幕。
我該如何實現？ 我一直在搜索，但到目前為止，還沒有運氣。 如果可以這樣稱呼，該技術是否有特定名稱？
3 個解決方案
解決方案1
0 2014-09-25 13:36:47
您可以使用jquery來實現此目標，如下所示：
$(window).load(function() {
$('PUT_ID_OF_VIDEO_CONTAINER_HERE').hide();
});
解決方案2
0 2014-09-25 13:45:03
我建議像這樣在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();
});
});
</script
解決方案3
0 2014-09-25 14: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
在Div背景中加載圖像時設置超時
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.