如果页面加载时间过长，则隐藏一个元素并显示另一个元素

Question

如果页面加载时间过长，是否可以隐藏一个元素然后显示另一个元素？情况：我有一个带有背景视频的 header，如果有人连接速度慢并且无法加载背景视频，则将 header 元素替换为另一个具有静态背景的 header 元素图片。

谢谢

Answer 1

这不是我通常推荐的东西，但这里有一个非常老套的解决方案。

const video = document.querySelector("#video-element-id");

let tooSlow = false;

let timeout = setTimeout(() => {
  tooSlow = true;
  
  ...logic to change header

  clearTimeout(timeout);
}, 1000);

video.addEventListener('loadeddata', () => {
  console.log(tooSlow ? 'too slow' : 'loaded');
  clearTimeout(timeout);
});

* 编辑 - 或者您可以对承诺 tbf

做同样的事情

const video = document.querySelector("#video-element-id");

const loader = new Promise((resolve) => {
  let timeout = setTimeout(() => {
      resolve(false);
    }, 0);

  video.addEventListener('loadeddata', () => {
      resolve(true);
    });
});

loader
  .then((isLoaded) => {
    if (isLoaded) {
      console.log('loaded');
      
      return;
    }
    
    console.log('too slow');

    ...logic to change header
  });

尽管 header 已切换，但仍然存在视频将继续下载的问题。更好的解决方案可能是使用 poster 属性来显示视频的静止图像，直到它完成加载:) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-poster

如果页面加载时间过长，则隐藏一个元素并显示另一个元素

Hide an element and show another if page is taking too long to load

javascript

wordpress

replace

timer

load