Question

我为我的网站创建了一个加载页面，但我需要一些帮助。

加载页面可见，直到加载完整的HTML页面然后淡出。我的问题是，我有一个视频作为背景，我想让加载页面可见，直到我的视频加载到后台。

这可能吗？如果你能帮助我，给出建议或其他，将不胜感激。

FRAGE

用于淡出的JS脚本

$(window).on('load', function(){
    $('.loading').fadeOut(500);
});

使用.load加载我的div的css和加载页面内容。视频在HTML正文中。

Answer 1

基于How to call a function after a div is ready?

的想法

jQuery(document).ready(checkContainer);

function checkContainer () {
  if($('#IDoftheVideo').is(':visible'))){ //if the container of the video is visible on the page
    $('.loading').fadeOut(500);
  } else {
    setTimeout(checkContainer, 50); //wait 50 ms, then try again
  }
}

如果您想知道视频是否已完全加载，假设其HTML5，您可以在此处获得一些想法：

http://atomicrobotdesign.com/blog/web-development/check-when-an-html5-video-has-loaded/

我想它看起来像是：

window.addEventListener('load', function() {
            var video = document.querySelector('#video');
            var loading = document.querySelector('.loading');

            function checkLoad() {
            if (video.readyState === 4) {
                preloader.parentNode.removeChild(loading);
            } else {
                setTimeout(checkLoad, 50);
            }
        }

        checkLoad();
    }, false);

Answer 2

谢谢Rantanen，我尝试了你的功能，对我的页面进行了一些改动。

window.addEventListener('load', function() {
        var video = document.querySelector('#login_background_video');
        var loading = document.querySelector('.loading');

        function checkLoad() {
        if (video.readyState === 4) {
            loading.parentNode.removeChild(loading);
        } else {
            setTimeout(checkLoad, 50);
        }
    }

    checkLoad();
}, false);

我猜它运行良好，现在我可以在加载页面淡出后看到我的视频正在运行。我现在没有时间学习很多jQuery，js，...还没有，但很快！再次感谢。随意改进有人知道如何编写JS和HTML代码。

Answer 3

如果您想继续使用jQuery，您的视频会使用video标记

$("#myVid").on("loadeddata", function () {
    $('.loading').fadeOut(500);
});

还有许多其他video events可以被解雇

HTML，Javascript，带页面+视频的加载页面

3 个答案: