I'm starting to use Modernizr for my front-end projects these days and just realized something that bugs me.
(Demo link after code snippets)
But first, here's what's before my <body>:
<script src="js/vendor/modernizr.custom.js" type="text/javascript"></script>
<script src="js/loader.min.js" type="text/javascript"></script>
And here's my loader script (removed some lines for brevity):
Modernizr.load([
// jQuery
{
load: '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js',
complete: function () {
if (!window.jQuery) {
Modernizr.load('js/vendor/jquery-1.11.1.min.js');
}
}
}
// Slick (slideshow)
,{
load: '//cdn.jsdelivr.net/jquery.slick/1.3.9/slick.min.js',
complete: function() {
if (!window.jQuery.fn.slick) {
Modernizr.load('slick/slick.min.js');
}
}
}
// Main script
,'js/script.min.js'
]);
Demo link: http://toki-woki.net/lab/transbal/
I can see the page load and, almost a second after that, my slideshow initializer (wrapped in a $() call) kicks in. That delay is fairly long and unaesthetic, which is what I want to fix.
I've looked at the Network tab in Chrome and see my Modernizr-loaded scripts are first loaded as images (thus, not executing) and then added as script tags and, eventually, executing. That would explain the delay, because jQuery would be executed late (after the DOMContentLoaded event) and the $() call would fire after that.
Some questions:
- Is that how Modernizr/yepnope works?
- Is it possible to reduce that delay?
- What event is used by Modernizr/yepnope to determine when to inject
scripttags? Looks like it'sloadbut that seems like a strange choice to me...
I've tried not using Modernizr.load at all and reference my script just before the </body> tag and it works perfectly (no slideshow size jumping) but it is harder and heavier to maintain...
Got tips? Thanks!