0

我的main.js文件如下所示：

require.config({    
    paths: {
        "jquery": "3rd_party/jquery-2.0.3.min",
        "bootstrap": "3rd_party/bootstrap.min",
        "handlebars":"3rd_party/handlebars",
        "html5shiv":"3rd_party/html5shiv",
        "modernizr":"3rd_party/modernizr",
        "respond":"3rd_party/respond.min",
        "jquery-ui":"3rd_party/jquery-ui-1.10.3.custom.min",
        'fancybox':'3rd_party/jquery.fancybox.pack'
    },

    shim: {
        "bootstrap": {
            deps: ["jquery"]
        },
        "jquery-ui": {
            deps: ["jquery"]
        },
        "fancybox": {
            deps: ["jquery"]
        }
    }
})

requirejs(["jquery", "fancybox","controllers/" + controller,'modules/login','bootstrap','handlebars','html5shiv','modernizr','respond', 'jquery-ui'],function($,fancybox,controller,handleLogin) {
    $(document).ready(function() {

        if ($(window).width()>991) {
            $(".sidebar").height($(".maincontent").height());   
        }

        $(".searchresults .greencol").height($(".searchresults .article").first().height()-100);
        $('.login').click(function() {
            handleLogin();
            return false;
        })
        $('.fancybox-inline').fancybox({
            maxWidth    : 800,
            maxHeight   : 600
        });
        $('.fancybox-document').fancybox({
            width: 660,
            height: 440
        });


        $('.fancybox-close-button').click(function() {
            $.fancybox.close();    
            return false;
        })



    });
    controller.init();
})

现在一切都发生了，实际上执行这个位需要一些时间：

if ($(window).width()>991) {
    $(".sidebar").height($(".maincontent").height());   
}

页面会有点闪烁。我唯一的想法是在index.html中单独包含 jQuery并将这一点放在<script>标签中。但后来我的 RequireJS 设置坏了。

您对如何实现这一目标有任何建议吗？

4

1 回答 1

1

因此，您希望尽早调整大小。我并不完全清楚你是如何更早地尝试这样做的，但这样做是尽可能早地实现它的方法，而不是破坏或绕过 RequireJS：

  1. requirejs从您当前的回调中取出以下内容：

    if ($(window).width()>991) {
    $(".sidebar").height($(".maincontent").height());   
}

  2. requirejs在当前调用之前添加以下调用：

    requirejs(["jquery"], function($) {
    $(document).ready(function() {
       if ($(window).width()>991) {
            $(".sidebar").height($(".maincontent").height());   
        }
    });
});

顺便说一句，这不需要在不同的<script>元素中。您可以将新呼叫放在requirejs您已有呼叫的前面。这样一来，加载 jQuery 后就会立即调整大小。

于 2013-11-14T17:43:43.963 回答