使用 JavaScript 加载屏幕在 phone 上没有任何变化

Question

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

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

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

我应该把网站的 link 放在一起来表明我的意思吗？这是一个投资组合:)

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 - 显示 "page loading" 动画 2 - 显示加载动画后，将视频加载到网站中 3 - 视频加载完成后，隐藏页面加载动画。

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

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

使用 JavaScript 加载屏幕在 phone 上没有任何变化

Loading screen using JavaScript changes nothing on a phone

html

javascript

loading