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

Question

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

在幕后下载图像时显示 "page-loading-indicator" 屏幕（很痛苦），但更重要的是，在那个 "page-loading-indicator screen" 中，显示一些口号很好地相互过渡以保持用户忙碌.

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

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>

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

how to display a textual carousel while the page loading the images

javascript

jquery

css

page-loading-message

pageloadstrategy