CODEWITHSUNDEEP
javascriptrequirejsmodernizr
shapeshifta
shapeshifta

Reputation: 298

Load modernizr in head but use it in require.js

I want to load modernizr synchronously in head to prevent a fouc. I am using require.js at before /body to load some other scripts in which I'd like to use modernizr for feature detection and such things.

What is the right way to do this or is it even recommended to do so? If I require modernizr in my scripts it gets loaded again, if I won't, it is undefined.

Thanks in advance. :)

Upvotes: 5

Views: 2832

Answers (1)

Andrey Kuzmin
Andrey Kuzmin

Reputation: 4479

If Modernizr is the 1st script loaded in head, then it is accessible from everywhere, so you can define simple wrapper like this:

define('modernizr', function () { return window.Modernizr });

This code may be put inside wrappers.js like this:

<head>
<script src="/js/vendor/modernizr.js"></script>   
<script src="/js/vendor/require.js"></script>  
<script src="/js/wrappers.js"></script>  
<script src="/js/main.js"></script>
</head>

Then in main.js

var scripts = document.getElementsByTagName('script')
  , src = scripts[scripts.length - 1].src
  , baseUrl = src.substring(src.indexOf(document.location.pathname), src.lastIndexOf('/'))

require.config({
  baseUrl: baseUrl
})

Upvotes: 9

Related Questions