在加载图像的页面时，如何显示文本旋转木马

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>