0

特定の画面幅用に modernizr を使用してスクリプトを配置しています。初期ロードではすべて正常に動作しますが、タブレットの向きを縦向きから横向きに変更すると、2 つの問題があります。私が使用しているコードを参照してください：

        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 が頭に追加され続けます (そのため、頭にスーパーサイズのスクリプトがたくさん付いているようになりました)。

したがって、基本的な質問は次のとおりです。modernizr がウィンドウのサイズ変更をチェックする可能性はありますか? または指定されたブレークポイント (私の場合は 600px) より下にサイズ変更するときにスクリプトが頭から削除される可能性がありますか?

アレック

4

1 に答える 1

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 );
}
于 2013-01-10T16:36:58.733 に答える