javascript - 使用 JavaScript 加载屏幕不会改变手机上的任何内容

Question

我有一个简单的问题。 当我加载一个包含 2 个视频的 html 页面时，我试图摆脱空白页面。 我搜索了一些解决方案，我发现最流行的似乎是这个(带有一些 css)。

  <script>
        // Wait for window load
        $(window).load(function() {
              // Animate loader off screen
              $(".TheDivClass").fadeOut("slow");;
        });
  </script>

但是当我使用手机(在 chrome 或 safari 上)加载网站时没有明显的差异，我想知道为什么。它仍然在至少 50 秒内加载到空白页面，然后加载器图标显示 0.5 秒。

我应该放置该网站的链接来表明我的意思吗？ 这是一个投资组合:)

https://velynns.netlify.com/

解决方案:

            // Wait for window load
            $(window).load(function() {
                  // Animate loader off screen
                  $('#Video1').load('LoadVideo1.html');
                  $('#Video2').load('LoadVideo2.html');
                  $(".se-pre-con").fadeOut("slow");;
            });

其中 LoadVideo1 和 LoadVideo2 包含视频标签。

Answer 1

您的视频肯定会导致所有内容的加载出现延迟。 处理这种情况的更好方法可能是首先从网站上删除所有视频，但在加载页面后保留空 div 以放置视频。

1 - 显示“页面加载”动画 2 - 显示加载动画后，将视频加载到网站中 3 - 视频加载后，隐藏页面加载动画。

$(window).bind("load", function() {  
    $('#movie-div').load('movie.html');
});

在页面加载后，执行类似的操作将视频加载到空 div 中。