Question

我现在开始使用Modernizr作为我的前端项目，只是意识到了让我烦恼的事情。

（代码段后的演示链接）

但首先，这是我<body>之前的内容：

<script src="js/vendor/modernizr.custom.js" type="text/javascript"></script>
<script src="js/loader.min.js" type="text/javascript"></script>

这是我的loader脚本（为简洁起见删除了一些行）：

Modernizr.load([

    // jQuery
    {
        load: '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js',
        complete: function () {
            if (!window.jQuery) {
                Modernizr.load('js/vendor/jquery-1.11.1.min.js');
            }
        }
    }

    // Slick (slideshow)
    ,{
        load: '//cdn.jsdelivr.net/jquery.slick/1.3.9/slick.min.js',
        complete: function() {
            if (!window.jQuery.fn.slick) {
                Modernizr.load('slick/slick.min.js');
            }
        }
    }

    // Main script
    ,'js/script.min.js'
]);

演示链接：http://toki-woki.net/lab/transbal/

我可以看到页面加载，然后差不多一秒钟，我的幻灯片初始化程序（包含在$()调用中）启动。这种延迟相当长且不美观，这是我想要解决的问题。

我查看了Chrome中的“网络”标签，看到我的Modernizr加载的脚本首先作为图像加载（因此，不执行），然后添加为script标记，最终执行。这可以解释延迟，因为jQuery将被执行得更晚（在DOMContentLoaded事件之后）并且$()调用将在此之后启动。

Network tab screenshot

有些问题：

那是Modernizr / yepnope的工作原理吗？
是否可以减少延迟？
Modernizr / yepnope使用什么事件来确定何时注入script标签？看起来像是load，但这对我来说似乎是一个奇怪的选择......

我已经尝试过根本不使用Modernizr.load并在</body>标记之前引用我的脚本并且它完美运行（没有幻灯片大小跳转）但维护起来更难，更重...

有提示吗？谢谢！

使用Modernizr / yepnope时长时间延迟

0 个答案: