javascript - 如何在页面加载图像时显示文本轮播

Question

我有一个图像重的网页。200 张图片，总计 100Mb 左右。我可以延迟加载它们，但我想尝试一种不同的技术。

在后台下载图像时显示“页面加载指示器”屏幕（疼痛），但更重要的是，在“页面加载指示器屏幕”中，显示一些标语很好地相互过渡以保持用户忙碌.

我需要在这里使用什么技术？一个接一个地显示一组短语是没有问题的，但是我们如何在页面加载时显示它们，以及在最后一张图片下载后我们如何将其删除？

Answer 1

这是自定义事件想法的演示。我们显示一个页面正在加载 div 并等待自定义事件，在演示中这只是在 setTimeout 上触发。但它给了你工作原理。

document.addEventListener('DOMContentLoaded', () => {

  document.addEventListener('PageIsLoaded', pageLoaded);
  
  // dummy (this would actually be called when images are loaded)
  setTimeout(() => {
    console.log('loaded');
    document.dispatchEvent(new CustomEvent('PageIsLoaded'));
  }, 3000);

});

function pageLoaded() {
  document.querySelectorAll('div').forEach(d => d.classList.toggle('hide'));
}

.hide {
  display: none;
}

<div class="loading">The page is loading</div>
<div class="loaded hide">The page has loaded</div>