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

Posted 2023-02-23

【中文标题】如果页面加载时间过长，则隐藏一个元素并显示另一个元素[关闭]

【英文标题】：Hide an element and show another if page is taking too long to load [closed]

【发布时间】：2021-12-26 06:13:44

【问题描述】：

如果页面需要很长时间才能完全加载，有没有办法隐藏一个元素然后显示另一个元素？ 情况：我有一个带有背景视频的标题，如果有人连接速度很慢并且无法加载背景视频，则将标题元素替换为另一个具有静态背景图像的标题。

谢谢

【问题讨论】：

您需要包含您对此所做的尝试，以便我们进行调试：***.com/help/minimal-reproducible-example

反其道而行之。显示静态图像，一旦加载视频，将图像替换为视频。这样，如果它没有加载，您仍然可以显示图像。

【参考方案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);
);

* EDIT - 或者你可以用 promise 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
  );

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