3

我正在使用modernizr 来检测媒体查询支持，以便我可以加载备用css 和js。但问题是有一个无样式的html闪烁，然后应用css，因为css是由modernizr动态加载的。它看起来很丑一段时间。有什么解决方案吗？

        Modernizr.load({
            test: Modernizr.mq('only all'),
            yep: ['test.js','/a/s/responsive-css/abcd.css'],
            nope: ['/a/s/xyz.css']
        });

检查此链接。 http://susheel3656.0fees.net/index_with_modenizr.html

4

3 回答 3

0

尝试将 Modernizr 初始化代码放在 head 标签的开头。在modernizr.js 之前它看起来并没有加载多少，但它可能值得一试。

如果这不起作用，解决方法是隐藏您的页面内容并在加载 css 时使用 jQuery 显示您的内容。

于 2013-03-16T20:15:13.757 回答
0

您是否考虑过使用Respond.js或CSS3-MediaQueries.js为（主要）IE7 和 IE8 添加媒体查询支持？

为每个人加载响应式 css，然后将你的 modernizr 调用更改为： 

Modernizr.load({
        test: Modernizr.mq('only all'),
        yep: ['test.js'],
        nope: ['/js/respond.js']
 });

我用这种方法取得了一些成功。最坏的情况是，仅使用 IE7 或 IE8 的访问者可能会看到未设置样式的内容。

如果您需要对旧版浏览器进行更多调整，您可以在页面标题中包含条件注释，添加 ie 标记或加载 js 脚本，最后在您的 CSS 中包含特定于浏览器的额外 CSS，例如：

HTML

在头脑中：[编辑]

<script>
Modernizr.load({
        test: Modernizr.mq('only all'),
        yep: ['test.js'],
        nope: ['/js/respond.js']
 }); 
</script>    

<!-- load the responsive CSS for everyone -->    
<link rel="stylesheet" href="/a/s/responsive-css/abcd.css" type="text/css"/>  

<!--[if IE 7]>  
<html class="ie7">  
<script src="/js/ie7-script.js">    
</script>  
<![endif]-->

CSS
然后在 CSS 中添加 

.ie7 .additional-selector{
/* Optional css specific to IE7 to compensate for old browser. Ideally this wouldn't be needed */
}

希望这可以帮助！

于 2013-03-17T17:43:13.210 回答
0

我今天早些时候遇到了这个问题，并想出了一个看起来不错的内容闪存解决方案。

CSS：html.js { display:none; }

jQuery：$('html.js').show();

如果 Modernizr 启用了 JavaScript，它会将 js 类添加到页面。它的作用是默认使用 CSS 隐藏整个页面，然后在 JavaScript 启动后显示它。

禁用 JavaScript 的用户不会受到影响，因为 Modernizr 无法将 js 类添加到 HTML 标记中。他们也不应该看到闪光灯，因为那是由于 Modernizr 本身，它从未加载过。希望有帮助！

于 2013-04-15T23:41:46.780 回答