剣道UIウィジェットがゆっくりとロードされる

Question

This私のブログです。下のサンプルコードを使用しています。以下に示す剣道の外部リソースをロードします。彼らは遅く主に遅くて/kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.jsロードしているどのように私はこれを達成することができますロードしています。

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" /> 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" /> 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" /> 

    <script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script> 
    <script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script> 

<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; } 
 

 
.k-input { 
 
    font-weight:bold !important; 
 
    font-size:12pt !important; 
 
    color: green !important; 
 
} 
 

 

 
::-webkit-input-placeholder { 
 
    color: green; 
 
} 
 

 
::-webkit-input-placeholder { 
 
    color: green; 
 
    font-weight: 800; 
 
} 
 

 
:-moz-placeholder { /* Firefox 18- */ 
 
    color: green; 
 
    font-weight: 800; 
 
} 
 

 
::-moz-placeholder { /* Firefox 19+ */ 
 
    color: green; 
 
    font-weight: 800; 
 
} 
 

 
:-ms-input-placeholder { 
 
    color: green; 
 
    font-weight: 800; 
 
} 
 

 
.container:hover{ 
 
background-color:#F0F2F3; 
 
} 
 

 
</style> 
 
    
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" /> 
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" /> 
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" /> 
 

 
    <script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script> 
 
    <script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script> 
 

 
<div class="container" style="overflow: hidden; 
 
border: 1px solid gray; 
 
    width: 465px; 
 
    margin-left: -180px; 
 
padding: 30px 70px 30px 170px;"> 
 

 

 
     <div id="example" role="application" style="float:left;width:49%; margin-right:2%;margin-left: -32%;"> 
 
\t \t  <div id="select" class="demo-section k-content"> 
 
      
 
      
 
      <select id="size" placeholder="Skills, Designations...." style="width: 230px;border-width: 2px !important; border-color: #D8D3D3 !important;" > 
 
       <option /> 
 
       <option />to 
 
       <option />code 
 
       <option />way 
 
       <option />always 
 
       <option />easily 
 
      </select> 
 
     
 
      
 
     </div> 
 
</div> 
 
     
 
<div id="example1" role="application" style="float:left;width:49%;margin-right:0;margin-left: -5px;"> 
 
\t \t  <div id="select" class="demo-section k-content"> 
 
      
 
      
 
      <select id="size1" placeholder="Location" style="width: 140px;border-width: 2px !important; border-color: #D8D3D3 !important;" > 
 
       <option /> 
 
       <option />Delhi 
 
       <option />Bangalore 
 
       <option />Jammu and kashmir 
 
       <option />ahmedabad 
 
       <option />Arunachal Pradesh 
 
      </select> 
 
     
 
      
 
     </div> 
 
</div> 
 

 
<div id="example2" role="application" style=" 
 
float: right; 
 
margin-left: 95px; 
 
    width: 49%; 
 
    margin-right: 14px; 
 
    margin-top: -47px;"> 
 
\t \t  <div id="select" class="demo-section k-content"> 
 
      
 
      
 
      <select id="size2" placeholder="Exp(Years)" style="width: 114px;border-width: 2px !important; border-color: #D8D3D3 !important; 
 
" > 
 
       <option /> 
 
       <option />0 Year 
 
       <option />1 
 
       <option />2 
 
       <option />3 
 
       <option />4 
 
      </select> 
 
     
 
      
 
     </div> 
 
</div> 
 

 

 
<div id="example3" role="application" style="float:right;width:49%;margin-right:-102px;margin-top: -47px;"> 
 
\t \t  <div id="select" class="demo-section k-content"> 
 
      
 
      
 
      <select id="size3" placeholder="Salary" style="width: 100px;border-width: 2px !important; border-color: #D8D3D3 !important; 
 
"> 
 
       <option /> 
 
       <option />&lt;1 Lac 
 
       <option />2 
 
       <option />3 
 
       <option />4 
 
      </select> 
 
     
 
      
 
     </div> 
 
</div> 
 
</div> 
 

 

 

 

 

 
      <script> 
 
       $(document).ready(function() { 
 
        // create ComboBox from input HTML element 
 
        
 
        // create ComboBox from select HTML element 
 
        $("#size").kendoComboBox(); 
 
$("#size1").kendoComboBox(); 
 
$("#size2").kendoComboBox(); 
 
$("#size3").kendoComboBox(); 
 
        
 
\t \t \t \t \t var select = $("#size").data("kendoComboBox"); 
 
var select = $("#size1").data("kendoComboBox"); 
 
var select = $("#size2").data("kendoComboBox"); 
 
var select = $("#size3").data("kendoComboBox"); 
 
\t \t \t \t 
 
       }); 
 
      </script>

Answer 1

あなたは完全な剣道スクリプトをロードしているが、あなただけのコンボボックスを使用しているので、なぜ唯一のコンボボックスのスクリプトをロードしませんか？

> kendo.all.min.js  2.653 KB 
> kendo.combobox.min.js  14 KB 

Hereあなたは......「必要なものだけを」