3

レスポンシブ サイトのフッターで、yep-nope と underscrore.js を使用して、モバイルとデスクトップ用に異なるスクリプトを読み込もうとしました。

var $window = $(window)
,throttled = _.throttle( packageLoader, 500);
$window.resize( throttled );

ブラウザ ウィンドウのサイズが変更されると、上記の関数がトリガーされます。500 ミリ秒待機してから、"packageLoader 関数を起動します。 

<script src="/assets/javascripts/yepnope.1.5.4-min.js"></script>
<script src="/assets/javascripts/underscore-min.js"></script>

function packageLoader(){

    Modernizr.load([
        {
            test: Modernizr.mq('(max-width:768px)'),
            yep: 
            [
                '/assets/javascripts/zepto.min.js',
                '/assets/javascripts/common-portable.js'
            ],
            nope:
            [
                '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js',
                // Accommodation guide plugins
                '/assets/javascripts/jquery.nouislider.min.js',
                '/assets/javascripts/jquery.cycle2.min.js',
                // END Accommodation guide plugins
                '/assets/javascripts/common-desktop.js'
            ],
            both: 
            [
                '/assets/javascripts/main.js'
            ]
        }
    ]);
}

window.onload = packageLoader();

問題：

IE7 +

さまざまなウィンドウ サイズで実行されるスクリプトを管理するための優れたソリューションが必要です。モバイル サイトをできるだけ軽くしたいと考えています。だから私は方法が必要だと信じています。

• 存在しない場合は、キャッシュまたはファイルから jQuery をロードします。• ユーザーがモバイルで表示している場合は zepto をロードします • スクリプトの処理

上記のスクリプトは最適な解決策ではない可能性があります。このコントロールを必要とするサイトを構築した場合は、使用したライブラリをお知らせください。

事前に多くの感謝

4

1 に答える 1

0

yepnope は減価償却されました。実際、デフォルトではモダナイザーの次のバージョンには含まれません。

これらのスクリプトを連結して、それらを醜くするだけで、運が良くなるかもしれません。スクリプト ファイルのサイズについて強調する前に、追加の http 要求/ミニフィケーション (画像、スクリプト、および css ファイル) について心配します。

于 2014-08-20T08:39:36.467 に答える