detect when respond.js finished work

Question

Is there a way I can detect when respond.js finished work?

Right now it takes about 1-2 seconds until the layout is displayed correctly. I would like to add some sort of loading indicator that will be hidden when respond.js finishes it's job.

Thanks.

PS. I know the good practices but the client is paying the money.

Answer 1

You can just hide the container and display the loading indicator by default, and then use a media query to toggle them.

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

Browsers that support the media query will immediately show the container and hide the loading indicator. Old IE won't until that media query is processed by respond.js.

Answer 2

WARNING: RANT

Think about this for a second. Think about being a user with your UI being locked up while you're waiting for a JS to modify your layout on an ancient (IE<9) browser with a slow rendering engine. Here's your solution:

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

IE8 users would much rather scroll horizontally a little bit (they're used to sub-optimal UX, they're using IE8 after all!!!!) than have respond.js destroy their user experience because it's chewing through browser performance.