Question

我将带有modernizr的脚本放在specyfic屏幕宽度上。一切都适用于初始加载但是当我将平板电脑方向从纵向更改为横向时，存在两个问题：根本没有加载scritps或者每当我切换到给定方向时，modernizr将复制它们。请参阅我正在使用的代码：

        Modernizr.load([
            {
                test : Modernizr.mq('screen and (min-width: 600px)'),
                yep : ['/js/supersized/js/supersized.core.3.2.1.min.js','/js/supersized/css/supersized.core.css'],
                complete : function() {
                    if(Modernizr.mq('screen and (min-width:600px)')) {
                        jQuery(function($){
                            $.supersized({
                                fit_portrait: true,
                                slides  : [
                                    {image : img/sample.jpg', title : 'sample'}
                                ]
                            });
                        }); 
                    };
                }
            }
        ]);

因此，当将方向从600px以下更改为更大的方向时（在加载较窄版本后），它不会加载脚本。但是当我添加$（window）.bind（'resize'，function（）{它不断添加脚本和css到头部时（所以我有很多超大的脚本附加到头部）。

所以基本上问题是：如果脚本一旦包含benradrady，或者在调整大小低于指定断点（在我的情况下为600px）时是否可以从头部删除脚本，那么modernizr是否有机会检查窗口调整大小。

Arek

Answer 1

我最终做的是创建一个加载的var并在运行mondernizr.load的函数之外将其设置为false。在同一个函数中，我设置了loaded = true。然后我在加载和调整大小时调用此函数。以下是如何使用代码执行此操作的示例。

var loaded = false;

// Set up function to call when DOM is ready and on resize
var loadScripts = function(){

    // Check to make sure our code has not run yet
    if(!loaded){

        Modernizr.load([{
            test : Modernizr.mq('screen and (min-width: 600px)'),
            yep : ['/js/supersized/js/supersized.core.3.2.1.min.js','/js/supersized/css/supersized.core.css'],
           complete : function() {
               if(Modernizr.mq('screen and (min-width:600px)')) {
                   jQuery(function($){
                       $.supersized({
                           fit_portrait: true,
                           slides  : [{image : 'img/sample.jpg', title : 'sample'}]
                        });
                    }); 
                }
            } 
        }]);

       // Switch loaded over to true so Modernizr.load is not run again on resize
       loaded = true;

    } // End if!loaded

};

// Run when DOM is ready
loadScripts();

// Run on resize
if( window.addEventListener ){
    window.addEventListener( "resize", loadScripts, false );
}

在调整屏幕大小时，modernizr会复制脚本

1 个答案: