检测respond.js何时完成工作

Question

有什么方法可以检测到respond.js什么时候完成工作？

现在它需要大约1-2秒才能正确地显示布局。我想添加某种类型的加载指示符，当respond.js完成它的工作时，它将被隐藏。

谢谢。

PS。我知道好的做法，但客户是付钱的。

Answer 1

默认情况下，您只需隐藏容器并显示加载指示符，然后使用媒体查询切换它们。

.container {
    display: none;
}
.loading {
    display: block;
}
@media (min-width: 1px) {
    .container {
        display: block;
    }
    .loading {
        display: none;
    }
}

支持媒体查询的浏览器将立即显示容器并隐藏加载指示符。在respond.js处理媒体查询之前，旧IE是不会的。

Answer 2

警告: RANT

想一想这个。考虑一下，当您在等待JS在一个带有缓慢呈现引擎的古老(IE<9)浏览器上修改您的布局时，您的UI会被锁定。以下是您的解决方案：

<!--[if lte IE 8]>
<style type="text/css">
 body { min-width: 1020px; }
</style>
<![endif]-->

IE8用户更愿意水平滚动一点(他们习惯于使用次优的UX，毕竟他们使用的是IE8！)respond.js会破坏他们的用户体验，因为它会影响浏览器的性能。