Js scripts break from footer

javascript jquery html twitter-bootstrap

109 просмотра

1 ответ

Google speed optimization tests recommend that I optimize my page by moving all non-essencial css and js to my footers. The css was easy, move anything relating to click effects or hover effects to the footer.

However the javascripts, I am finding cannot be moved. I am using a bootstrap template that is a bit dated. There are 28 scripts that all load locally, mostly various jquery libraries.

I have gone through about 5 pages on the site and one by one tried to move each of the javascripts to the footer. Every single one causes some sort of js error or another on my site.

Now, the part that really baffles me is, I have viewed the source to be sure, and there is not a single js file running anywhere else on the pages that I have tried this on.

I have also tried moving all the scripts to the footer at once. No matter what, if I remove them from the header - I get js errors and things start failing... accordion menu's, object placement, everything...

So my question is, how is it that my site breaks when I put my js files in the footer even when there is no other javascript on the page? What is it I do not understand because clearly I am not understanding something.

(by footer I am talking about code just before the close body tag, not in a footer tag or div designed for the footer)

the scripts from my header

<link rel="icon" type="image/ico" href="favicon.ico"/>
<script type='text/javascript' src='/js/jquery.js'></script>
<script type='text/javascript' src='/js/jquery-ui.min.js'></script>
<script type='text/javascript' src='/js/plugins/bootstrap.min.js'></script>
<script type='text/javascript' src='/js/plugins/fullcalendar/fullcalendar.min.js'></script>

<script type='text/javascript' src='/js/plugins/jquery/jquery.mousewheel.min.js'></script>
<script type='text/javascript' src='/js/plugins/cookie/jquery.cookies.2.2.0.min.js'></script>
<script type='text/javascript' src='/js/plugins/charts/excanvas.min.js'></script>
<script type='text/javascript' src='/js/plugins/charts/jquery.flot.js'></script>    
<script type='text/javascript' src='/js/plugins/charts/jquery.flot.stack.js'></script>    
<script type='text/javascript' src='/js/plugins/charts/jquery.flot.pie.js'></script>
<script type='text/javascript' src='/js/plugins/charts/jquery.flot.resize.js'></script>
<script type='text/javascript' src='/js/plugins/sparklines/jquery.sparkline.min.js'></script>
<script type='text/javascript' src='/js/plugins/select2/select2.min.js'></script>
<script type='text/javascript' src='/js/plugins/uniform/uniform.js'></script>
<script type='text/javascript' src='/js/plugins/maskedinput/jquery.maskedinput-1.3.min.js'></script>
<script type='text/javascript' src='/js/plugins/validation/languages/jquery.validationEngine-en.js' charset='utf-8'></script>
<script type='text/javascript' src='/js/plugins/validation/jquery.validationEngine.js' charset='utf-8'></script>
<script type='text/javascript' src='/js/plugins/mcustomscrollbar/jquery.mCustomScrollbar.min.js'></script>
<script type='text/javascript' src='/js/plugins/animatedprogressbar/animated_progressbar.js'></script>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.js'></script>
<script type='text/javascript' src='/js/plugins/cleditor/jquery.cleditor.js'></script>
<script type='text/javascript' src='/js/plugins/dataTables/jquery.dataTables.min.js'></script>    
<script type='text/javascript' src='/js/plugins/fancybox/jquery.fancybox.pack.js'></script>
<script type='text/javascript' src='/js/cookies.js'></script>
<script type='text/javascript' src='/js/actions.js'></script>
<script type='text/javascript' src='/js/charts.js'></script>
<script type='text/javascript' src='/js/plugins.js'></script>
<script type='text/javascript' src='/js/mail.js'></script>

No other scripts exist on the page. If i put them in the exact same order in my footer the site breaks....

Автор: Bruce Источник Размещён: 08.11.2019 11:03

Ответы (1)


2 плюса

Решение

Any code that you put inside the webpage must run on an event(callback), typically onload. The scripts. You may to load them in this order.

  1. Library/Framework
  2. Libraries that depends on Library
  3. Your library
  4. Your external scripts.
Автор: peter Размещён: 20.08.2016 08:32
Вопросы из категории :
32x32