在jQuery文档准备好之前加载Modernizr

Question

I'm using modernizr for the first time and facing some issues.

Here are the steps that I've done:

loaded Modernizr at the html header loaded JQuery at the html footer

in the Jquery document ready I checked couple of browser capabilities using Modernizr. If that check fails it will redirect to another page.

Most of the time checking using Modernizr inside document ready works fine but sometimes it fails and redirect to another page even from the same browser.

I guess it is because document ready loads before Modernizr thus Modernizr couldn't work. Is there anything you could help me?

$(function() { 
    //if browser can't provide certain features, it will redirect the browser to dumb phone page

    if(satisfiedWithBrowser()){
        // do other stuff
    }else
        window.location = 'redirect/';
});

function satisfiedWithBrowser(){    
    //console.log(Modernizr);

    if(!Modernizr.csstransforms || !Modernizr.backgroundsize || !Modernizr.cssanimations || !Modernizr.hashchange) // || !Modernizr.touch)
        return false;
    else
        return true;
}

Thanks

Answer 1

Yep sounds like you have a race condition, I would say there are two options to try:

• Move moderniser to be alongside jQuery in the footer so that it is requested just before.
• Rather than waiting for $(document).ready() use $(window).load() .

The first option should sort your problem. The reason - at least as far as I have always understood the placing of script tags - is that when a script tag is in the body it gets requested as it is found / parsed, whereas script tags in the head will be triggered at different times depending on the browser (and on cache state) . You basically need to have both your script tags being loaded using the same method (either both at the footer, or both in head) .

The second option should work as a fallback because rather than waiting for DOM readiness, you'll be waiting till window.load which should include waiting for all resources.