I went through each template and moved all of the inline js to a single scripts.js file, leaving only script variables that could be referenced later.
For instance inside slideshow.tpl I moved all the inline and left only this:
Code: Select all
<script>var slideshow_module=<?php echo $module; ?>;</script>
With my set up I have a separate slideshow for the home page so I created 2 functions, one that does just the default nivoslider and one with options for the homepage.
Code: Select all
function loadSlideShow () {
$('#slideshow'+slideshow_module).nivoSlider();
}
function loadHomeSlideShow () {
$('#slideshow0').nivoSlider({
effect:"random",
slices:15,
boxCols:8,
boxRows:4,
animSpeed:1000,
pauseTime:8000,
startSlide:0,
directionNav:true,
directionNavHide:true,
controlNav:false,
controlNavThumbs:false,
controlNavThumbsFromRel:true,
keyboardNav:true,
pauseOnHover:true,
manualAdvance:false
});
}
Then I simply call those functions with this:
Code: Select all
if ($('.nivoSlider').length > 0) {
if ($('.nivoSlider').attr('id') == 'slideshow0') {
loadHomeSlideShow ();
} else {
loadSlideShow ();
}
}
The other option you have is to leave everything in place, go through all your templates and defer all your inline js until after the page loads which would include the js that loads at the bottom of your page.
Code: Select all
<script defer>// your inline js here</script>
I haven't tested that personally, but as long as you don't defer the main js file calls in your footer it should work as expected, though I would guess you'd probably need to tweak it in spots.
Hope that helps.
-V
