jQuery mega menu showing some blocks on slow connection. how to fix it?

Question

I am using mega menu on this. [DUE TO THE SECURITY and BAcklinks I delete the link - In case if any one needs the link just PM me]

I am using mega menu for the navigation.

Only the following script I am using for this.

And I placed the mega menu jQuery script just before the </body> tag

<script type="text/javascript">
$(function(){
    $('#mega-menu-3').dcMegaMenu({
        rowItems: '2',
        speed: 'fast',
        effect: 'fade'
    });
});
</script>

But some block are displayed at the navigation area till the page or JS files load I guess.

I could clearly see those odd blocks on slow connections.

How can I fix this guys?

Answer 1

CSS:

#mega-menu-3 {
    display: none;
}

JS:

$(window).load(function(){
    $('#mega-menu-3').show();
});

If it doesn't work, try this (and ignore the CSS I suggested above):

$(document).ready(function(){
    $('#mega-menu-3').hide();
});

$(window).load(function(){
    $('#mega-menu-3').show();
});

Now it will only show when the page is fully loaded. Hope this helps. :)

Answer 2

You can hide blocks in css, and then on document.ready just set display:block to elements.