Minimizing jQuery dependencies?

[Ryujin]

This page is very heavy. I see that the jQuery library accounts 164K which is almost 40% of the page weight. As can be seen in the source, /jquery.js loads twice, as do several other scripts! But if i remove /jquery.js library from either line, the page breaks (tabbed box does not come together).

The page is here.

I am weak on understanding the ordering of dependencies. Are there any ideas that jump out at you about how script and css calls could be reordered so that the big library would need to be called only once? Thank you!

[tinymark]

The page for text purposes(how big is the asp file on my drive) is about 36k. The biggest thing I see is your javascript. Here's what you're using.

<script type="text/javascript" src="/library/js/jquery.js"></script>		
<script type="text/javascript" src="/library/js/hoverIntent.js"></script>  	
<script type="text/javascript" src="/library/js/dropdowns.js"></script>
<script type="text/javascript" src="/library/js/dateHours.js"></script>
<script type="text/javascript" src="/library/includes/data.js"></script> 
<script src="/library/js/siteSearch.js" type="text/javascript"></script>
<script type="text/javascript" src="/library/js/corn.js"></script>
<script src="/library/js/vertmenu.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".round").corner();
});
$(document).ready(function(){
	$(".pageRound").corner("cc:#333 tl tr 20px");
});
</script>
<script type="text/javascript" src="/library/js/jquery.js"></script>
<script type="text/javascript" src="/library/js/hoverIntent.js"></script>
<script type="text/javascript" src="/library/js/dropdowns.js"></script>
<script type="text/javascript" src="/library/js/dateHours.js"></script>
<script type="text/javascript" src="/library/js/corn.js"></script>
<script src="/library/labs/zentabs.js" type="text/javascript"></script>
<script src="/library/js/jquery.ui.core.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="/library/js/cookie.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".rounded").corner("cc:#333 35px top");
});
$(document).ready(function(){
	$(".round").corner("30px");
});

$(document).ready(function(){
	$(".oval").corner("90px");
});
$(document).ready(function(){
	$(".SSCentralSearchSearchCriteria").corner("11px");
});
</script>

You basically have too much going on. The $(document).ready function needs to be amalgamated into one. If you really need all those javascripts, you're stuck. You have a lot of work in front of you.

[Dani]

I can't understand why jquery.js is needed on line 17, since it alredy exists on line 1. Additionally, as tinymark stated, just create one document.ready function and put lines 28, 31, 35 and 38 into it. While you're at it, lines 11 and 14 too.

[tinymark]

Let me clarify by what I mean

A lot of work

. You must take a careful look at what you are using each script for. As cscgal points out it looks like you are loading two jquery files, but because of the name difference, the first one may be only a couple of lines of code.

What exactly does each script do for your web site? For instance here's a quote from the hoverIntent.js.

* hoverIntent is similar to jQuery's built-in "hover" function except that
* instead of firing the onMouseOver event immediately, hoverIntent checks
* to see if the user's mouse has slowed down (beneath the sensitivity
* threshold) before firing the onMouseOver event.

Do you know why you need this precise control over the timing of mouse event?
I am not being rude but the site looks like a cut copy paste job. Step back and look into each of these files. If you do not need the mouse event firing at a different time then normal you could eliminate this script. It may not be much, but it's a start. I hope this has been helpful. If you need help with some of the scripts and what they do, post when you run into a do I really need this situation.

[Ryujin]

Thanks very much. I've cleaned up most of the redundant 'corner' bits, but but my basic question is the same as Dani's: I can't understand why both instances of that jquery.js line are needed.

Re: tinymark's question, HoverIntent is in there because users found the hair-trigger dropdowns annoying (see http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/331910 )

In case it makes a difference, Lines 1-16 above are in a header file (an include).

I appreciate your help!

[tinymark]

You have a problem that you can try fixing by playing with the order of loading the scripts. It sounds like you have a jquery chaining problem. There are ways to fix chaining problems. Have a look at http://api.jquery.com/jQuery.noConflict/ for more details.

It may not be too bad if the noconflict solves the problem. If not, you have to play with the order of loading.