RequireJS: выполнить Jquery код domReady

Question

My 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()); 
} 

И на странице появляется небольшое мерцание. Моя единственная идея - включить jQuery отдельно в index.html и поместить этот бит в теги <script>. Но тогда моя установка RequireJS нарушилась.

Есть ли у вас какие-либо предложения по достижению этого?

Answer 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.