Javascript DOMContentLoaded has a mysterious 5-10 second delay

Question

I'm really confused about this. I have a reasonably dynamic page on a test site which uses Bootstrap's carousel (but I'm hoping it's my code, not theirs, that's wrong).

Test page can be found here: http://bit.ly/ZjLl19

What you'll notice is as follows...

• The page starts to load
• The staff portraits begin to appear
• Then... nothing happens for about 5-10 seconds
• After 5-10 seconds, a carousel appears with staff biographies and larger portraits

Why is there this delay? I've looked in Webkit debugger and I can just see idle time in the timeline whilst DOMContentLoaded runs, before anything else happens. Any ideas?

Thanks!

Answer 1

It's actually an easy fix. Simply apply the active class to the first element to show it (Or which ever one you want to display first). Otherwise you're waiting until dom has loaded and the carousel has been initialised to do that for you.

So this below would do the trick and display the carousel immediately without having to wait for JS:

<div class="carousel-inner">
    <div class="item mtt-item active">...</div>
    <div class="item mtt-item">...</div>
</div>