Question

我的 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设置破了。

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

Answer 1

所以你希望尽早调整大小。我并不完全清楚你是如何尝试早做的，但这样做是为了让它尽早发生，而不是打破或绕过RequireJS：

从当前requirejs回调中获取以下内容：

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

在当前通话前面的requirejs添加以下电话：

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

顺便说一下，这不需要在不同的<script>元素中。您可以将新呼叫requirejs放在您已有的呼叫前面。通过这种方式，只要加载jQuery，就会发生调整大小。

RequireJS：执行jQuery代码domReady

1 个答案: