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

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>

Related

external plugin not load first time

I have a problem with this site: http://www.gm-impianti.srl/index.html
when I open the site, and from the menu, i open the "portfolio" page, the instagram plugin is not loaded. If I load the page again, the plugin works. why?
this is the js that is not loaded on the first start:
<script src = "https://apps.elfsight.com/p/platform.js"> </script>
thanks in advance
Change the order of your scripts from
<script src="js/plugins.js"></script>
<script src="js/scripts.js"></script>
<script src="https://apps.elfsight.com/p/platform.js" ></script>
to
<script src="https://apps.elfsight.com/p/platform.js" ></script>
<script src="js/plugins.js"></script>
<script src="js/scripts.js"></script>

AngularJS improve first loading of landing page, deffer loading of other scripts

My angular app uses quite a lot of modules which are all needed to be included before my app.js file (where the main app lies) and am using ui-view, due to that the first load takes quite some time because it has to wait for all the dependent modules to load first, before loading the app so that the views can show up.
Is there any way i can prevent that, like loading the app first and defer the loading of the modules ?
Or at least not to have to all the modules from the beginning but as needed.
<html>
<body>
<ui-view></ui-view>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/xeditable.min.js"></script>
<script src="js/angular-ui-router.min.js"></script>
<script src="js/ui-grid.min.js"></script>
<script src="js/dirPagination.js"></script>
<script src="//npmcdn.com/ui-grid-auto-fit-columns#latest/dist/autoFitColumns.min.js"></script>
<script src="js/csv.min.js"></script>
<script src="js/pdfmake.min.js"></script>
<script src="js/vfs_fonts.js"></script>
<script src="js/lodash.min.js"></script>
<script src="js/jszip.min.js"></script>
<script src="js/excel-builder.dist.min.js"></script>
<script src="js/ng-file-upload-shim.min.js"></script>
<script src="js/ng-file-upload.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Preferably I'd like solution that will not require huge changes in the project.

Best way to call an external js file from the HTML page (as of July 2017)

As of July 2017, what is the best practice for calling an external Javascript file from an HTML page?
1) In the HEAD with a DEFER attribute:
<head>
<title></title>
<script src="script.js" defer></script>
</head>
2) In the HEAD without a DEFER attribute and placing all the js code in a function which fires after the DOM is loaded.
<head>
<title></title>
<script src="script.js"></script>
</head>
script.js file:
function init() {
// all JS code in here
}
window.onload = init;
3) Immediately BEFORE the closing BODY tag:
...
<script src="script.js"></script>
</body>
4) Immediately AFTER the closing BODY tag:
...
</body>
<script src="script.js"></script>
</html>
5) Some other way?
The best way to call an external javascript is
<script type="text/javascript" src="script.js" async></script> before the closing tag for for body (</body>).
async allows the DOM to not stop its process when it finds a <script> tag.
For more information, refer to this post https://developers.google.com/speed/docs/insights/BlockingJS

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.

Categories