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>
Related
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.
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.
Apologies if this is an old question. I have spent a few hours searching for an answer but had no luck.
I'm attempting to convert an existing (primarily jQuery) application to use AngularJS. I've hit a problem where a JavaScript file I am including in index.html is being run too early when being included in my AngularJS application. i.e. by using a <script> tag:
<script type="text/javascript" src="/components/js/theme.js"></script>
This file contains a lot of jQuery which needs the rest of the page to have been rendered to have an effect. So is there a way I can include this script and ensure it is only loaded after the rest of the page has finished loading? I have a set of directives on the page and the script is being loaded before these are rendered.
Update:
Here is the structure of my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App Title</title>
<base href="/">
<!-- icons and CSS -->
<link href="/img/ico/favicon.ico" rel="shortcut icon"
type="image/vnd.microsoft.icon">
<link href="/css/bootstrap.min.css" media="screen" rel="stylesheet"
type="text/css">
<!-- External Libraries -->
<script type="text/javascript" src="/external/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="/external/angular/angular.js"></script>
<!-- Angular Components -->
<script type="text/javascript" src="/components/services/ui.js"></script>
<script type="text/javascript"
src="/components/navigation/js/navigation.js"></script>
<!-- App set and config -->
<script type="text/javascript" src="/js/app/app.js"></script>
<script type="text/javascript" src="/js/app/config.js"></script>
<script type="text/javascript" src="/js/app/routes.js"></script>
<!-- endbuild -->
<!-- Precompiled HTML templates -->
<script type="text/javascript" src="/js/templates.module.js"></script>
</head>
<body ng-cloak>
<!-- directive -->
<top-nav-bar></top-nav-bar>
<div class="content">
<div class="container">
<!-- directive -->
<side-nav-bar></side-nav-bar>
<!-- angular view -->
<div ng-view></div>
</div>
</div>
<!-- directive -->
<adysis-footer></adysis-footer>
<!-- Bootstrapper -->
<script src='/js/app.bootstrap.js' type='text/javascript'></script>
<!-- JAVASCRIPT FILE WHICH NEEDS TO RUN AFTER PAGE HAS LOADED! -->
<script type="text/javascript" src="/components/js/theme.js"></script>
</body>
</html>
As you can see, the "theme.js" file is the last item of the <body>. I have stopped in the file to ensure it is being loaded. But this is always done before the rest of the page has rendered. Could some other JavaScript be interfering upsetting things? Note that I have not included all of the JavaScript files that are being included.
Update 2:
I've added further break points in the JavaScript functions for the directives you can see in my index.html. Each of them is stopped in after the theme.js is executed. I don't know why this is, so I'm mentioning this in case it gives more clues as to the problem.
Update 3:
The first line of the "theme.js" file is:
jQuery(document).ready(function($)
And then the function contains a long series of jQuery selectors to setup events and so on. My understanding is the point of this line is to wait until the document has been loaded. But could something in my setup, e.g. Angular, be preventing this from happening?
I've tried changing this line to:
angular.element(document).ready(function($)
and whilst this does lead to the content on the function to be run later, it's still not after the whole document has loaded.
Make sure it's at the end of your HTML Body and not in the header section. If it's in the head section it'll load before the page renders.
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>
I'm trying to load up angular inside my body tag but for some reason nothing is getting loaded, when I check the resources panel it only contains files from the head. If I move all this stuff to the head It shows up in resources and its loaded, but when in the body, it's unloaded.
<body>
<section ui-view=""></section>
<!-- inject:js-->
<script src="/angular/angular.js"></script>
<script src="/json3/lib/json3.js"></script>
<script src="/es5-shim/es5-shim.js"></script>
<script src="/jquery/dist/jquery.js"></script>
<script src="/angular-resource/angular-resource.js"></script>
<script src="/angular-cookies/angular-cookies.js"></script>
<script src="/angular-sanitize/angular-sanitize.js"></script>
<script src="/angular-animate/angular-animate.js"></script>
<script src="/angular-touch/angular-touch.js"></script>
<script src="/angular-ui-router/release/angular-ui-router.js"></script>
<!-- endinject-->
<!-- inject:files:js-->
<script src="/js/app.js"></script>
<!-- endinject-->
</body>
What's going on here? why is this not being loaded into the page?
I'm using gulp and gulp-webserver but that shouldn't be the cause.
<base href="http://localhost:9000">
was my problem. A difficult find, it was
<base href="localhost:9000">
before making the root directory obsolete!
Thanks for the help all!