CSS/Javascript loading too late

Question

I am using a script called dropotron which creates a nice pulldown menu from making lists.

eg.

<ul class="menu">
<li>home</li>
<li>Categories
   <ul><li>foo</li><li>moo</li><li>too</li></ul>
</li>
</ul>

etc.

My problem is, that when I load a page, it takes a few seconds before the list turns into the menu how it should look and appears bad for the visitor.

My relevant code which includes the js,css etc. is:

<script type="text/javascript">
$(function() {
    $('#menu > ul').dropotron({
        mode: 'fade',
        globalOffsetY: 11,
        offsetY: -15
    });

});
</script>

Any suggestions on how I could speed it up, or make it not happen at all?

Thank you.

takes a few seconds 0_o. Potential can of worms. Who wants to start? — Insyte
– Insyte, Commented Oct 31, 2013 at 11:56
@IanBrindley is right. This is missing a lot of context. That, or you're running on 56k dial-up. — Sébastien Renauld
– Sébastien Renauld, Commented Oct 31, 2013 at 11:58
In your css file add #menu { display: none; } and in your script, after the dropotron() call, add $("#menu").show(); — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Oct 31, 2013 at 11:59
This may help you, how to speed up but you may keep your ul hidden and on load, you may show and apply method. — The Alpha
– The Alpha, Commented Oct 31, 2013 at 12:00
Make a jsfiddle example to show us the problem in action and maybe we can help. — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Oct 31, 2013 at 12:09

plalx · Accepted Answer · 2013-10-31 12:23:17Z

2

Simply avoid waiting until the DOM is ready to apply your plugin. Just put your plugin's initialization process right after your list's HTML in the body. That should speed it up.

<ul id="#my-menu" class="menu">
    <li>home</li>
    <li>Categories
    <ul><li>foo</li><li>moo</li><li>too</li></ul>
    </li>
</ul>

<script>
<!-- I changed the selector to target the element directly, but you can play with this. -->
$('#my-menu').dropotron({
    mode: 'fade',
    globalOffsetY: 11,
    offsetY: -15
});
</script>

You can also try to initially hide the list using inline styles and show it once the plugin has been correctly applied, however that will not necessary lead to a better user experience.

Note: Do not forget to minimize your JavaScript files and CSS files.

edited Oct 31, 2013 at 12:23

answered Oct 31, 2013 at 12:02

plalx

43.8k7 gold badges77 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

The Alpha Over a year ago

$(document).ready() fires immediately once the DOM is parsed, it's not load and if you run any js code before DOM is parsed then it won't work.

plalx Over a year ago

@RCV, You do not have to wait until the DOM is completely parsed before manipulating it.

The Alpha Over a year ago

If, the ul is not in the DOM then $('#menu > ul') will throw error but you may put the script in the footer to make sure that, element is loaded but this is not the case here, IMO.

plalx Over a year ago

@RCV, I am not sure what you aren't understanding in the example I provided.  represents the list's HTML, then the script comes right after. The element will therefore exist in the DOM and can be manipulated.

The Alpha Over a year ago

Where did you mention that the script should be placed after the list ? Basically it stays in the header, are you telling to use <script> tags in the body or where ?

|

deflomu · Accepted Answer · 2013-10-31 12:04:01Z

1

You seem to load the dropotron.js script after you load your html. To ensure the javascript is ready when the html is loaded you can put your <script src="../dropotron.js"></script> into the <head> part of your page. That way dropotron.js will be loaded before any html is parsed and rendered.

answered Oct 31, 2013 at 12:04

deflomu

6371 gold badge6 silver badges17 bronze badges

2 Comments

Reinstate Monica Cellio Over a year ago

How do you come to that conclusion, or is it just a guess?

deflomu Over a year ago

It's a guess based on the "takes a few seconds" statement.

Yusuf · Accepted Answer · 2018-02-01 20:37:09Z

0

Try with window.onload global event handler.

function load () {
 ......
}
window.onload = load;

Hope this works!

answered Feb 1, 2018 at 20:37

Yusuf

2,4081 gold badge20 silver badges26 bronze badges

3 Comments

Spoody Over a year ago

Can you add some explanation, why this answer works and what is OP doing wrong.

Yusuf Over a year ago

I just got the same issue when I tried to make parent div's height equal to its child image height with jquery. But there were tons of images with various of size. When I run my application locally everything worked great but on the host there was a bug, jquery couldn't change div's height corresponding to it's child's height, I thought that while browser tried to render images, jquery was loaded first. Then, I add $(document).ready() method. It also could not help because it was JQuery. Answer to your question is, because it is just JS and Other People doing wrong using jquery.

Yusuf Over a year ago

But inside load function you can write your code in jquery. It works! but I don't recommend

phron · Accepted Answer · 2013-10-31 11:59:33Z

-2

try

<script type="text/javascript">
s(document).ready(function(){
$(function() {
    $('#menu > ul').dropotron({
        mode: 'fade',
        globalOffsetY: 11,
        offsetY: -15
    });

});
});

</script>

to ensure your document is fully loaded before running your function...

answered Oct 31, 2013 at 11:59

phron

1,84518 silver badges24 bronze badges

2 Comments

Reinstate Monica Cellio Over a year ago

He already has a document ready handler in there. $(function() { }) is a document ready handler. You've just suggested wrapping it with another one.

Reeno Over a year ago

$( document ).ready() and $(function() {}) is the same, see: learn.jquery.com/using-jquery-core/document-ready

Collectives™ on Stack Overflow

CSS/Javascript loading too late

4 Answers 4

6 Comments

2 Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

2 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related