Menu
I have OpenCart application. Javascripts are loaded in settings.php inside path '/catalog/controller//settings.php with similar codes as:
$this->document->addScript('catalog/view/theme/<theme>/lib/lazy/jquery.lazy.1.6.min.js');
$this->journal2->minifier->addScript('catalog/view/theme/<theme>/lib/actual/jquery.actual.min.js', 'header');
$this->journal2->minifier->addScript('catalog/view/theme/<theme>/lib/hover-intent/jquery.hoverIntent.min.js', 'footer');
Here, 'theme' means theme name that is installed. I want to defer or async these javascript loading in OpenCart, how can I do it?
I know that addScript syntax has 1s parameter as file, second location, 3rd defer and 4th async where defer and async can be boolean. I have tried statement as below to see defer false and async true:
$this->journal2->minifier->addScript('catalog/view/theme/<theme>/lib/hover-intent/jquery.hoverIntent.min.js', 'footer', false, true);
but I am not sure if this will work or not. Please suggest
525
Here is a script I've been using for quite some time, in the head element.
With this you get good control of your loading of files, and can start loading anything after all the DOM is loaded, just make sure the files is not required anywhere in the DOM upon load.
<head>
<title></title>
<link rel='stylesheet' type='text/css' href='css.css' />
<script type='text/javascript'>
var DomLoaded = {
done: false, onload: [],
loaded: function () {
if (DomLoaded.done) return;
DomLoaded.done = true;
if (document.removeEventListener) { document.removeEventListener('DOMContentLoaded', DomLoaded.loaded, false); }
for (i = 0; i < DomLoaded.onload.length; i++) DomLoaded.onload[i]();
},
load: function (fireThis) {
this.onload.push(fireThis);
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', DomLoaded.loaded, false);
} else {
/*IE<=8*/
if (/MSIE/i.test(navigator.userAgent) && !window.opera) {
(function () {
try { document.body.doScroll('up'); return DomLoaded.loaded(); } catch (e) { }
if (/loaded|complete/.test(document.readyState)) return DomLoaded.loaded();
if (!DomLoaded.done) setTimeout(arguments.callee, 10);
})();
}
}
/* fallback */
window.onload = DomLoaded.loaded;
}
};
DomLoaded.load(function () {
var d = document;
var h = d.getElementsByTagName('head')[0];
var s = d.createElement('script');
s.setAttribute('type', 'text/javascript');
s.setAttribute('async', true);
s.setAttribute('defer', true);
s.setAttribute('src', '/path/to/scripts.js');
h.appendChild(s);
});
</script>
</head>
And here is a good article which describes a few more ways to speed things up, and one of them is combining your js files into 1, or 2-3-4, based on which one needs which. The benefit is less http request.
http://exisweb.net/web-site-optimization-making-javascript-load-faster
And google is filled with articles
https://www.google.com/search?q=speed%20up%20loading%20javascript%20files&rct=j
185
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
