在加载时立即加载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

回答

相关问题