我正在使用Modernizr.load()方法测试浏览器是否理解媒体查询,如果不是,我加载了respond.js库。
但是,我看到通过modernizr.load方法加载respond.js会让我得到一个FOUC,其中内联脚本方法没有。
modernizr.load方法:
<script>
Modernizr.load([{
load: 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js',
complete: function () {
if (!window.jQuery) {
yepnope('js/libs/jquery.js?v=1.7.2');
}
}
},
{
test: Modernizr.mq('only all'),
nope: 'js/plugins/respond.js?v=v1.1'
}])
</script>
内联方法:
<!--[if lte IE 8]>
<script src="js/plugins/respond.js?v=v1.1"></script>
<![endif]-->
为什么会这样?不应该更快的异步方法?或更好的内联方法,因为脚本阻止DOM并等待脚本加载...?
答案 0 :(得分:1)
这取决于你对FOUC的关注程度。异步方法的优点是它是非阻塞的。我会切换它,以便响应是第一个,这样你就不必等待jQuery被解析。这可能解决了FOUC。在Modernizr.load
(see here)中拨打<head>
,如下所示:
Modernizr.load([{
test: Modernizr.mq('only all'),
nope: 'js/plugins/respond.js?v=v1.1'
},{
load: 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js',
complete: function () {
window.jQuery || Modernizr.load('js/libs/jquery.js?v=1.7.2');
}
}]);
你的IE条件也是一个很好的解决方案 - 可以说更好。如果你这样做,那就把它放在jQuery之前,你会没事的:
<!--[if lt IE 9]>
<script src="js/plugins/respond.js?v=v1.1"></script>
<![endif]-->
Modernizr.load([{
load: 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js',
complete: function () {
window.jQuery || Modernizr.load('js/libs/jquery.js?v=1.7.2');
}
}]);