2015-04-29 104 views
0

使用jQuery.svg,我試圖將一長串SVG文件動態加載到網站上相應的抽屜中。我正在成功加載它們,但是,當它們全部加載時,網站上的任何點擊都會延遲至少2秒。Jquery.svg加載性能問題

當svg.load函數被刪除時,網站非常快。

這是jQuery的:

function initFloorPlans(){ 
    $('.list-item', '#tab1').each(function(){ 
      var zoneID = $(this).attr('data-value'); 

      $(this).find('.svg-load').svg(); 
      svg = $(this).find('.svg-load').svg('get'); 
      var path = "svg/thumbs/"+zoneID+".svg"; 

      svg.load(path,{ 
       addTo: false, 
       changeSize: true 
      }); 
    }); 

} 

,這是一個HTML樣本:

<div id="tab1"> 
    <div class="list-item" data-value="zone1-1"> 
     <div class="svg-load"></div> 
    </div> 
    <div class="list-item" data-value="zone1-2"> 
     <div class="svg-load"></div> 
    </div> 
    <div class="list-item" data-value="zone1-3"> 
     <div class="svg-load"></div> 
    </div> 
    <div class="list-item" data-value="zone1-4"> 
     <div class="svg-load"></div> 
    </div> 
    <div class="list-item" data-value="zone1-5"> 
     <div class="svg-load"></div> 
    </div> 
    <div class="list-item" data-value="zone1-6"> 
     <div class="svg-load"></div> 
    </div> 
</div> 

我不知道,如果上面是足夠的信息,知情的答案,但如果你看到什麼可疑的,或者如果你可以推薦一個我可以開始檢查我的代碼的區域,那將是非常感謝。

的文件名去(zone1-1.svg),(zone1-2.svg)等

具體的問題:如果有一些揮之不去的事件怎麼回事,有沒有可能清楚些特定的功能成功向上?

謝謝!

+1

你在調用函數嗎?請包括更多。 – JosephMCasey

回答

1

好了,所以每約瑟夫·凱西的要求,這裏的函數調用:

$(window).load(function(){ 
    initFloorPlans(); 
}); 

事實證明,函數本身是完全沒問題。真正的問題是SVG文件被損壞,只是在我用Adobe Illustrator刪除了其中每個文件的空白之後(僅使用了畫板複選框)。

我不確定此解決方案是否適用於面臨此類問題的任何人,但是,值得考慮的事實是SVG已損壞。

我現在加載了幾百個SVG,絕對沒有問題。

謝謝!