0

我正在为特定的屏幕宽度放置带有modernizr 的脚本。初始加载一切正常，但是当我将平板电脑的方向从纵向更改为横向时，有两个问题：脚本 wp 根本不加载，或者每次我切换到给定方向时，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 添加到头部（所以我得到了很多附加到头部的超大脚本）。

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

阿雷克

4

1 回答 1

1

我最终做的是创建一个加载的 var 并将其设置为 false 运行 mondernizr.load 的函数之外。在同一个函数中，我设置了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 );
}
于 2013-01-10T16:36:58.733 回答