我有一个图片较多的网页。 200 张图片总计 100Mb 左右。 我可以延迟加载它们,但我想尝试不同的技术。
在幕后下载图像时显示“页面加载指示器”屏幕(很痛),但更重要的是,在那个“页面加载指示器屏幕”中,显示一些口号很好地相互过渡以保持用户忙。
我需要在这里使用什么技术? 一个接一个地显示一组短语是没有问题的,但是我们如何在页面加载时显示它们,以及如何在最后一张图像下载后将其取走?
最佳答案
这是自定义事件想法的演示。 我们显示一个页面正在加载 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>
关于javascript - 如何在页面加载图像时显示文本轮播,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54876777/