CodeIgniter Forums
Numerous CSS and Scripts Loading in Every View - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forum-20.html)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forum-23.html)
+--- Thread: Numerous CSS and Scripts Loading in Every View (/thread-18797.html)

Pages: 1 2 3 4


Numerous CSS and Scripts Loading in Every View - El Forum - 05-18-2009

[eluser]Fielder[/eluser]
I've got a common header (and footer) that is called on every page view from various controllers within my webapp. The code snippet below just happens to be for inserting new businesses form.
Code:
$this->load->view('include/header.php', $data);
$this->load->view('business_new');
$this->load->view('include/footer.php');

But the header and footer are the same everywhere.
My header now contains numerous .css and .js files that are not necessarily used in every view, but they're being called and loaded anyways.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
&lt;html &gt;
&lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;

    &lt;title&gt;&lt;?=$title; ?&gt;&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" media="all" href="&lt;?=base_url(); ?&gt;assets/css/reset.css" /&gt;
    &lt;link rel="stylesheet" type="text/css" media="all" href="&lt;?=base_url(); ?&gt;assets/css/text.css" /&gt;
    &lt;link rel="stylesheet" type="text/css" media="all" href="&lt;?=base_url(); ?&gt;assets/css/1000_20_10_10.css" /&gt;
    &lt;link rel="stylesheet" type="text/css" media="all" href="&lt;?=base_url(); ?&gt;assets/css/grid.css" /&gt;
    &lt;link rel="stylesheet" type="text/css" media="all" href="&lt;?=base_url(); ?&gt;assets/css/jquery.treeview.css" /&gt;
    &lt;link rel="stylesheet" type="text/css" media="all" href="&lt;?=base_url(); ?&gt;assets/css/jquery.autocomplete.css" /&gt;
    &lt;link rel="stylesheet" type="text/css" media="all" href="&lt;?=base_url(); ?&gt;assets/css/default.css" /&gt;

    <scrpt type="text/javascript" src="&lt;?=base_url(); ?&gt;assets/js/jquery-1.3.2.min.js"></scrpt>            &lt;!--- jquery release ---&gt;
    <scrpt type="text/javascript" src="&lt;?=base_url(); ?&gt;assets/js/jquery.js"></scrpt>                        &lt;!--- application jquery ---&gt;
    <scrpt type="text/javascript" src="&lt;?=base_url(); ?&gt;assets/js/jquery.validate.js"></scrpt>            &lt;!--- form validation plugin ---&gt;
    <scrpt type="text/javascript" src="&lt;?=base_url(); ?&gt;assets/js/jquery.maskedinput-1.2.2.js"></scrpt>    &lt;!--- form masked input plugin ---&gt;
    <scrpt type="text/javascript" src="&lt;?=base_url(); ?&gt;assets/js/jquery.cookie.js" ></scrpt>                &lt;!--- cookie plugin for treeview menu navigation ---&gt;
    <scrpt type="text/javascript" src="&lt;?=base_url(); ?&gt;assets/js/jquery.treeview.js" ></scrpt>            &lt;!--- treeview menu navigation plugin ---&gt;
    <scrpt type='text/javascript' src="&lt;?=base_url(); ?&gt;assets/js/jquery.ajaxQueue.js"></scrpt>            &lt;!--- input autocomplete plugin - to prevent conflicting ajax requests ---&gt;
    <scrpt type='text/javascript' src="&lt;?=base_url(); ?&gt;assets/js/jquery.autocomplete.js"></scrpt>        &lt;!--- input autocomplete plugin ---&gt;
    <scrpt type='text/javascript' src="&lt;?=base_url(); ?&gt;assets/js/localdata.js"></scrpt>                    &lt;!--- input autocomplete localdata for plugin - need to eliminate ---&gt;

&lt;/head&gt;

&lt;body&gt;
ignore the <scrpt> and </scrpt> misspelling, CI forum removed my line of code where it was script

I've got even more .js files to load for various other pages, but is there a better way of doing this? I imagine always loading these .js files when they are not needed is inefficient.
Perhaps I can define the scripts needed in the controller array variable ($data), pass them into the view and just call a single $script_array variable to output them all into the html head?

Code:
$data['script_array'] = '<scrpt type="text/javascript" src="$base_url()"/assets/js/jquery-1.3.2.min.js"></scrpt><scrpt type="text/javascript" src="$base_url()"/assets/js/jquery.js"></scrpt>';

Any other good standard practices you guys use?
Thanks.


Numerous CSS and Scripts Loading in Every View - El Forum - 05-18-2009

[eluser]Thorpe Obazee[/eluser]
after rereading the post, you can add the scripts and css to the 'business_new' view. not necessarily to the head.


Numerous CSS and Scripts Loading in Every View - El Forum - 05-18-2009

[eluser]Dam1an[/eluser]
Also, if all the JS is purely functional (eg on click events) you can load them at the end (just inside the body tag). This will give what appears to be quicker load times

Defining just the ones you want in the controller seems the way to go (you can even echo them there, but they will be a bit out of place, but still work)


Numerous CSS and Scripts Loading in Every View - El Forum - 05-18-2009

[eluser]xwero[/eluser]
Put the css and javascript that is needed for every page in one file and dynamically add the css and javascript the is needed for the specific page.

Map which css and javascript go where and if you find a pattern you can join the common css and javascript with specific css and javascript for groups of pages, for example a forms.js and forms.css.


Numerous CSS and Scripts Loading in Every View - El Forum - 05-18-2009

[eluser]Thorpe Obazee[/eluser]
If you have the time, you should probably go with xwero's idea. it's much more manageable.


Numerous CSS and Scripts Loading in Every View - El Forum - 05-19-2009

[eluser]Shahgeb[/eluser]
i agree with Sr. Research Associate, such js which you need at every page put them in common view and other js can b used according to your need. I will increase in performance of site


Numerous CSS and Scripts Loading in Every View - El Forum - 05-19-2009

[eluser]Thorpe Obazee[/eluser]
[quote author="Shahgeb" date="1242736765"]i agree with Sr. Research Associate....[/quote]

or you can call 'em xwero.


Numerous CSS and Scripts Loading in Every View - El Forum - 05-19-2009

[eluser]Dregond Rahl[/eluser]
could also create a PHP function to handle loading JS and CSS, to create a function that works something like

Code:
$data['script_array'] = load_external_files(
            'jquery.autocomplete.css',
            'default.css',
            'jquery-1.3.2.min.js',
            'jquery.ajaxQueue.js'
);

and load them based on what view your using.


Numerous CSS and Scripts Loading in Every View - El Forum - 05-19-2009

[eluser]xwero[/eluser]
Dregond it's just another way to include many files. The included files should be kept to a minimum but they also should contain as less unneeded code as possible. So instead of creating one big file with everything in it, create a few files based on what groups of pages need. And if a single page needs extra code you still can add it separately.

There are some php solutions that join js/css files for you but i think it's better to include static files as much as possible.


Numerous CSS and Scripts Loading in Every View - El Forum - 05-19-2009

[eluser]jdfwarrior[/eluser]
[quote author="xwero" date="1242742403"]Dregond it's just another way to include many files. The included files should be kept to a minimum but they also should contain as less unneeded code as possible. So instead of creating one big file with everything in it, create a few files based on what groups of pages need. And if a single page needs extra code you still can add it separately.

There are some php solutions that join js/css files for you but i think it's better to include static files as much as possible.[/quote]

His way isn't entirely bad though. I actually had the same thought he did with the exception of just making an array of the files I wanted to load within the controller and doing a simple:

Code:
&lt;? foreach ($css as $file): ?&gt;

&lt;link rel="stylesheet" type="text/css" href="&lt;?=$file?&gt;" /&gt;

&lt;? endforeach; ?&gt;

Not excessive. Not a lot of extra code. Op could specify ONLY the files that should be loaded by putting only those in the array, keeping it to a minimum.