Question

我有一个MVC4项目，我遇到了Modernizr的问题。我想测试一下是否支持html输入类型日期。如果没有，则加载kendoUI（类似于jquery-UI）以显示我使用日期输入类型作为datepicker控件的所有实例。我只使用下面的脚本来加载我的kendo css和js文件，只有在不支持输入类型的日期时。

<script>
    Modernizr.load({
        test: Modernizr.inputtypes.date,
        nope: ['/Content/Kendo-styles/kendo.common.min.css',
            '/Content/Kendo-styles/kendo.default.min.css',
            '/Scripts/kendo/kendo.web.min.js'],
        complete: function () {
            $('input[type=date]').kendoDatePicker({
                format: "dd/MM/yyyy"
            });
        }
    });
</script>

我把它放在我页面的脚本部分（不是_Layout / master，而是放在下一级）。它工作但我闪烁。它似乎加载我的脚本，然后在运行完整的功能之前显示我的页面，因此首先显示一个文本框，然后显示约。半秒后将日期选择器取代。

如果我删除了完整的函数并将以下脚本添加到我的文档就绪函数中，它有时会失败。在这种情况下，我可以看到（在浏览器开发人员工具 - 网络中）已下载剑道脚本但尚未执行，因此无法识别kendodatepicker。在这种情况下，我只能假设文档就绪将在Modernizer完成之前运行。我这是对的？下面是我的文档准备代码。

$(function () {    
    if (!Modernizr.inputtypes.date) {
        $('input[type=date]').kendoDatePicker({
            format: "dd/MM/yyyy",
        });            
    }
}

有没有人知道这个解决方案，或者我做了一些愚蠢的事情......

Answer 1

半秒是因为它必须下载3个文件然后运行该功能。

我是预装CSS（它是轻量级的）的倡导者，因为你使用的是mvc4，你可以将它添加到一个包中，它不会在生产中添加任何额外的请求

这将使它更快

MVC4和Modernizr.Load在有条件地添加datepicker时产生闪烁

1 个答案: