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>