What's the best way to load scripts?

karl1 · Share | #1 (**permalink**) 09-27-2011, 05:52 AM

hey, I'm wondering about the best way to load scripts in a normal (php/html) website, I mean, I've this site that has some external scripts, and I've to add all of it to the head section, can I add a call to a file that in that file I can place all the javascipt urls to load:
for example:

HTML Code:

<head>
<script type="text/javascript" src="js/website-scripts.js"></script>
</head>

and in that js file:

HTML Code:

<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="js/slides.min.jquery.js"></script>
<script type="text/javascript" src="js/nivo-slider/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="js/superfish-menu/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish-menu/superfish.js"></script>
<script type="text/javascript" src="js/scrolltop/scrolltopcontrol.js"></script>
<script type="text/javascript" src="js/prettyPhoto/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/jquery.featureList-1.0.0.js"></script>
<script type="text/javascript" src="js/swfobject/swfobject.js"></script>
<script type="text/javascript" src="js/easing/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/kwicks/jquery.kwicks-1.5.1.pack.js"></script>

am I dreaming?

or can it be done, and if so, is it a good practice?

JohnnyS · #2 (**permalink**) 09-29-2011, 02:50 AM

Quote:

Originally Posted by karl1

hey, I'm wondering about the best way to load scripts in a normal (php/html) website, I mean, I've this site that has some external scripts, and I've to add all of it to the head section, can I add a call to a file that in that file I can place all the javascipt urls to load:
for example:

HTML Code:

<head>
<script type="text/javascript" src="js/website-scripts.js"></script>
</head>

and in that js file:

HTML Code:

<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="js/slides.min.jquery.js"></script>
<script type="text/javascript" src="js/nivo-slider/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="js/superfish-menu/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish-menu/superfish.js"></script>
<script type="text/javascript" src="js/scrolltop/scrolltopcontrol.js"></script>
<script type="text/javascript" src="js/prettyPhoto/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/jquery.featureList-1.0.0.js"></script>
<script type="text/javascript" src="js/swfobject/swfobject.js"></script>
<script type="text/javascript" src="js/easing/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/kwicks/jquery.kwicks-1.5.1.pack.js"></script>

am I dreaming?

or can it be done, and if so, is it a good practice?

http://code.google.com/p/minify/ would be the best answer..

karl1 · #3 (**permalink**) 09-29-2011, 03:21 AM

thanks Johnny.
now it makes more sense, even though I needed to know if my doubt was posible or not

WaNey · #4 (**permalink**) 09-29-2011, 06:01 AM

your practise is very intresting, impress me! but I don't know the effectness of such method,hope more people can answer the question..

Alexwhin · #5 (**permalink**) 09-29-2011, 04:52 PM

Minify is a great way of getting this done. Also, if you can get the compressed version of the librarys then all the better.

JohnnyS · #6 (**permalink**) 10-04-2011, 01:53 AM

Quote:

Originally Posted by karl1

thanks Johnny.
now it makes more sense, even though I needed to know if my doubt was posible or not

you're welcome!

Rukbat · #7 (**permalink**) 10-08-2011, 05:26 PM

PHP Code:


		
			
<?php

...

echo '<head>';

require('js/website-scripts.js');

in website-scripts.js, you have

PHP Code:


		
			
echo '<script type="text/javascript" src="js/custom.js"></script>

<script type="text/javascript" src="js/slides.min.jquery.js"></script>

<script type="text/javascript" src="js/nivo-slider/jquery.nivo.slider.pack.js"></script>

<script type="text/javascript" src="js/superfish-menu/hoverIntent.js"></script>

<script type="text/javascript" src="js/superfish-menu/superfish.js"></script>

<script type="text/javascript" src="js/scrolltop/scrolltopcontrol.js"></script>

<script type="text/javascript" src="js/prettyPhoto/jquery.prettyPhoto.js"></script>

<script type="text/javascript" src="js/jquery.featureList-1.0.0.js"></script>

<script type="text/javascript" src="js/swfobject/swfobject.js"></script>

<script type="text/javascript" src="js/easing/jquery.easing.1.3.js"></script>

<script type="text/javascript" src="js/kwicks/jquery.kwicks-1.5.1.pack.js"></script>';

and just add or delete files in website-scripts.js as needed.

karl1 · #8 (**permalink**) 10-24-2011, 06:07 AM

@ Rukbat
Why do you have the echo, can I just use the require function?

Rukbat · #9 (**permalink**) 10-24-2011, 10:47 AM

Quote:

Originally Posted by karl1

@ Rukbat
Why do you have the echo, can I just use the require function?

You wanted it in the head, so you have to have an HTML <head> tag. You can do it either way:

<?php
...
echo '<head>';

or

<head>
<?php

Since my default PHP file includes FirePHP at the top, I have nothing preceding my <?php tag. (That sends headers, and can cause the script to bomb out.)

karl1 · #10 (**permalink**) 10-24-2011, 11:14 AM

Quote:

Originally Posted by Rukbat

You wanted it in the head, so you have to have an HTML <head> tag. You can do it either way:

<?php
...
echo '<head>';

or

<head>
<?php

Since my default PHP file includes FirePHP at the top, I have nothing preceding my <?php tag. (That sends headers, and can cause the script to bomb out.)

OK

I'm used to the second one.
Nice tip, thanks for the info

karl1 · #11 (**permalink**) 10-25-2011, 09:38 AM

I got a question again, sorry.
Should I use one echo for every css file for example, or can I use

Quote:

what about the body, is it OK to leave it outside php tags?
thanks