在加載時立即加載Select2 jQuery插件RequireJS

我有一個RequireJS設置，用於加載Select2 jQuery插件。在加載時立即加載Select2 jQuery插件RequireJS

我有一個問題，但是這意味着在頁面加載，瀏覽器默認選擇輸入顯示幾秒鐘，然後換出高級的Select2輸入大概由於RequireJS異步加載我的腳本。

有沒有一種方法可以避免這種情況，而不必將腳本包含在HTML中？

這是我RequireJS設置：

require.config({ 
baseUrl: '/assets/js', 
paths: { 
    jquery: '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min', 
    async: 'libs/async', 
    modernizr: 'libs/modernizr-custom', 
    jqueryUI: 'libs/jquery-ui.min', 
    bootstrap: 'libs/bootstrap.min', 
    select2: 'libs/select2.min', 
}, 
shim: { 
    'select2': { 
     deps: ['jquery'], 
     exports: 'Select2' 
    }, 
    'bootstrap': { 
     deps: ['jquery'], 
     exports: 'Bootstrap' 
    }, 
    'jqueryUI': { 
     deps: ['jquery'], 
     exports: 'jQueryUI' 
    }, 
} 
}); 

requirejs(["app/polyfills"]); 
requirejs(["app/filter"]); 
requirejs(["app/select"]); // Select2 plugin trigger 
requirejs(["app/datepicker"]); 
requirejs(["app/popover"]); 
requirejs(["app/dropdown"]); 
requirejs(["app/tooltip"]); 
requirejs(["app/layout"]); 
requirejs(["app/menu"]); 
requirejs(["app/toggles"]);

這是實際的腳本：

define(['select2'], function(Select2) { 

    var app = {}; 

    app.select = (function(){ 
     var module = {}; 

     module.init = function(){ 

      $(".select-advanced").select2({ 
       width: 'off', 
       dropdownAutoWidth: 'true', 
      }); 
     }; 

     return module; 
    })(); 

    $(document).ready(function(){ 
     app.select.init(); 
     console.log('select'); 
    }); 

});

來源

2014-10-30 jshjohnson

沒有辦法力 RequireJS加載模塊的時候了。它是異步模塊定義API的實現。所以不能保證模塊何時加載。一些選項：

負載選擇二與在<head>，而不是一個RequireJS元素<script>。這也需要用<script>元素加載它的所有依賴項。
使用杏仁加載您的應用程序。雖然RequireJS不能強制模塊立即加載，但杏仁可以採用一系列AMD模塊並同步加載它們。然而，它帶來了一些限制，這將對你現在正在做的事情做出重大改變。目前還不清楚它是否適用於您的申請。我已經討論過杏仁here和here。
修改您的應用程序，以便在加載模塊之前，依賴於它們在由RequireJS加載的模塊上的外觀的DOM部分不可見。我最近用一個使用AngularJS的頁面做了這個。 HTML包含由AngularJS解析的標記。在我做了必要的更改之前，當頁面首次加載時，標記會提供給用戶，看起來很醜。我修改了頁面，以便頁面的敏感部分以display: none的樣式開始，並在Angular加載後刪除它。我發現從不可見到可見的轉變是可以接受的。

我一般使用第三種方法。

來源

2014-10-30 10:25:56 Louis

對不起 - 我的意思是包括，不是內聯（我編輯的問題）。選項3適用於我，因爲我不支持關閉JS的用戶。謝謝 – jshjohnson 2014-10-30 12:42:34

很高興幫助！我已經刪除了內聯括號中的括號，將我的答案與問題的新狀態同步。 :) – Louis 2014-10-30 12:44:14

-1

一種方法是隱藏select並在select2完成加載後顯示它。

工作實例http://jsfiddle.net/9wk33bLo/

HTML

<select id="e1" style="display: none">

$.when(
    $("#e1").select2({ 
     width: 'off', 
     dropdownAutoWidth: 'true' 
})).done(function() { 
    this.select2("container").show(); 
});

來源

2014-10-30 10:59:27

在加載時立即加載Select2 jQuery插件RequireJS

回答

相關問題