Js scripts break from footer - javascript

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....

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.
Library/Framework
Libraries that depends on Library
Your library
Your external scripts.

Related

Javascript not loading in Safari

Im working on a site that I'm launching tonight and for the life of me cannot figure out why my scripts are not working in Safari. All is fine in Chrome but it seems like the scripts arent even loading for the site in safari. Im loading the scrips using wordpress's wp_enqueue_script() function and this is how the scripts are rendering in the source
<script type='text/javascript' src='http://52.26.145.136/FitnessFifteen/wordpress/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='http://52.26.145.136/FitnessFifteen/wordpress/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<script type='text/javascript' src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js?ver=4.5.3'></script>
<script type='text/javascript' src='http://52.26.145.136/FitnessFifteen/wordpress/wp-content/themes/fitnessfifteen/js/jquery.easing.min.js?ver=4.5.3'></script>
<script type='text/javascript' src='http://52.26.145.136/FitnessFifteen/wordpress/wp-content/themes/fitnessfifteen/js/scrolling-nav.js?ver=4.5.3'></script>
<script type='text/javascript' src='http://52.26.145.136/FitnessFifteen/wordpress/wp-content/themes/fitnessfifteen/js/responsiveScript.js?ver=4.5.3'></script>
<script type='text/javascript' src='http://52.26.145.136/FitnessFifteen/wordpress/wp-content/themes/fitnessfifteen/js/signup-script.js?ver=4.5.3'></script>
<script type='text/javascript' src='http://52.26.145.136/FitnessFifteen/wordpress/wp-content/themes/fitnessfifteen/js/slide-script.js?ver=4.5.3'></script>
<script type='text/javascript' src='http://52.26.145.136/FitnessFifteen/wordpress/wp-content/themes/fitnessfifteen/js/clients-script.js?ver=4.5.3'></script>

Get progress for site - loading scripts & libraries

I have quite a bunch of script and libraries that I am using in my website, which takes like 5 to 8 seconds to load.
ex.
<script type="text/javascript" src="../lib_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../lib_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../lib_components/angular/angular.js"></script>
<script type="text/javascript" src="../lib_components/angular-resource/angular-resource.min.js"></script>
<script type="text/javascript" src="../lib_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="../lib_components/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="../lib_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="../lib_components/lodash/dist/lodash.min.js"></script>
<script type="text/javascript" src="../scripts/js/overdo.js"></script>
I want to show a loading bar till all the scripts have been loaded, can anyone guide me on whats needs to be done for that?
There is very simple approach you can use in case when all the scripts you want to load are loaded synchronously (you don't use modules loader, async attributes, etc) - like in your example.
The trick is add progress indicator script the very first on the page, before all your heavy scripts. It is also make sense to inline this script (because it shouldn't be too big ideally):
<script>
// some progress bar implementation progress.show()
console.log('showing progress, loading bar, etc.');
</script>
<script src="../lib_components/jquery/dist/jquery.min.js"></script>
<script src="../lib_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../lib_components/angular/angular.js"></script>
<script src="../lib_components/angular-resource/angular-resource.min.js"></script>
<script src="../lib_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="../lib_components/angular-cookies/angular-cookies.min.js"></script>
<script src="../lib_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="../lib_components/lodash/dist/lodash.min.js"></script>
<script src="../scripts/js/overdo.js"></script>
<script>
// hiding loading bar
console.log('scripts loaded')
</script>
Now, for the implementation of the actual progress bar, it's up to you how and what to render. However, remember that depending on where you put those scripts DOM tree might not be loaded yet (if scripts are in <head>). I would anyway recommend to place scripts before closing </body>. The ideal structure for this approach would be:
<!DOCTYPE html>
<html>
<head>
<!-- some styles, no scripts here -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="assets/styles.css" />
</head>
<body>
<div class="loading" hidden>Loading...</div>
<!-- Some application HTML code -->
<script>
// show/create progress/loading
var loading = document.querySelector('.loading')
loading.hidden = false
</script>
<!-- many script tags ... -->
<!-- ... -->
<script>
// hide/remove progress/loading
loading.parentNode.removeChild(loading)
</script>
</body>
</html>

How can I make my JS script calls in Magento appear on one line?

I am doing various modifications to my NGINX Magento server and part of this is to do front end optimisations
I am currently using a CDN plugin to host my JS but Magento always calls JS lines (huge massive calls to JS libariries which looks ugly in the code view) that I want to combine to one line.
I know you can use Admin > Developer to merge JS files but I dont want to do this. I want to make this:
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/prototype/validation.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/builder.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/effects.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/dragdrop.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/controls.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/slider.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/varien/js.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/varien/form.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/mage/translate.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/mage/cookies.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/varien/product.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/varien/configurable.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/calendar/calendar.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/calendar/calendar-setup.js"></script>
Change to
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/prototype/validation.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/builder.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/effects.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/dragdrop.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/controls.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/slider.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/varien/js.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/varien/form.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/mage/translate.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/mage/cookies.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/varien/product.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/varien/configurable.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/calendar/calendar.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/calendar/calendar-setup.js"></script>
I think is what you're looking for. I tested this with Magento 1.9.2.1.
In this file Mage_Page_Block_Html_Head, function getCssJsHtml() on line 210 character 112-119 you'll find this . "\n". Remove that from the function and your JS files will be rendered in one line as you requested.
Keep in mind not to modify core files but to extend the class and override only this function to maintain rest of functionality.

Loading Javascript files sequentially in <body> and fire callback on completion

I have an weebsite (Cordova/Phonegap app actually) that currently has in <head>:
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="appPolyfills.js"></script>
<script type="text/javascript" src="appLibs.js"></script>
<script type="text/javascript" src="app.js"></script>
This works fine, but actually the website scripts are quite heavy, so while the scripts are parsed, the html of the page is actually not displayed.
I want the HTML of the page to be displayed, and only then load the scripts above.
I know I can load the scripts in the <body> tag, but in my case I must absolutly load these scripts sequentially.
So basically what I want is:
Make the HTML display immediately on startup before loading any script
Load the scripts sequentially in body
Be notified when the last script (app.js) is loaded, so that I can start the app (as the document ready event has already fired, I need another one)
Is this possible?
I can accept a JQuery based solution but prefer raw javascript.
you can put the script-tags after the body and
you can place an own script after the included scripts
...
</body>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="appPolyfills.js"></script>
<script type="text/javascript" src="appLibs.js"></script>
<script type="text/javascript" src="app.js"></script>
<script>
starttheapp(); // call function when "app.js" is ready
</script>
</html>
You can use defer in your tag to delay loading this script after the body is loaded
or use async to load while loading the body
<script defer="defer" type="text/javascript" src="cordova.js"></script>
<script defer="defer" type="text/javascript" src="appPolyfills.js"></script>
<script defer="defer" type="text/javascript" src="appLibs.js"></script>
<script defer="defer" type="text/javascript" src="app.js"></script>

JavaScript jQuery fancybox

I have a problem with fancybox. I read a few answers here, but had't found a solution for my problem. I have these scripts loaded in my webpage:
Sripts for fancybox:
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
Other scripts that my page includes:
<script src="assets/js/jquery-1.8.3.min.js"></script>
<script src="assets/js/jquery.plugins.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/plugins/selectnav/selectnav.min.js"></script>
<script src="assets/plugins/tweet/jquery.tweet.js"></script>
<script src="assets/plugins/fitvids/jquery.fitvids.js"></script>
<script src="assets/plugins/isotope/jquery.isotope.min.js"></script>
<script src="assets/plugins/sharrre/jquery.sharrre-1.3.4.min.js"></script>
<script src="assets/plugins/revolutionslider/js/jquery.themepunch.revolution.min.js"></script>
<script src="assets/js/template.js"></script>
<script src="assets/js/customizer.js"></script>
Problem is that when I have all of these fancy box won't work. I tryed many combinations and found that the only possible for a fancbox to work is to remove script 'jquery-1.8.3.min.js' from page. If I remove it dropdown menu is not working, and the fancybox does.
Where is the problem? I just copied scripts, not a body code, because I toought it's not nessesary.

Categories