當加載外部JavaScript文件時，Colorbox延遲打開並「鎖定」

我使用colorbox在我的項目中加載模態頁面。當我點擊打開一個模式時，該頁面需要一段時間才能加載，並在一段時間內「鎖定」窗口。我做了一個簡單的頁面來表示我的問題。訪問：http://testes.tiagocrizanto.com/ 當點擊索引2頁面加載正常，但是，當你點擊鏈接模態的模態需要時間來加載（注意，一會兒加載圖像鎖定）。如果您打開Chrome開發工具並選擇網絡選項卡，您會看到加載到模式窗口中的外部js文件需要一段時間才能加載。在我的示例中，該窗口需要一段時間才能加載，但是，如果我嘗試加載3個或更多js文件，模式窗口可能需要10秒或更多秒才能加載。當加載外部JavaScript文件時，Colorbox延遲打開並「鎖定」

代碼發送到索引2頁和腳本的加載模式：

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> 
    Index2 
</asp:Content> 

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.cbox').colorbox({ 
      innerWidth: 833, 
      innerHeight: 500, 
      scrolling: true 
     }); 
    }); 
    </script> 
    <a href="/Home/Modal" class="cbox">Modal</a> 
</asp:Content>

模態代碼：

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Modal.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %> 

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 

<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/ScriptFile.js") %>"></script> 


    <h2>Modal</h2> 

</asp:Content> 

<asp:Content ID="Content3" ContentPlaceHolderID="HeaderContent" runat="server"> 
</asp:Content>

任何想法，爲什麼會發生？

來源

2013-12-12 Tiago Crizanto

一個loooonnngggg搜索後，我找到了解決辦法： optimizing colorbox and adding extra jquery

彩盒使用jQuery的load（）方法爲它的Ajax處理，所以你只需要所需的選擇添加到鏈接的href。

$(document).ready(function() { 
    $('.cbox').colorbox({ 
     href: function() { 
      return $(this).attr('href'); 
     }, 
     innerWidth: 833, 
     innerHeight: 500, 
     scrolling: true 
    }); 
});

鏈接布頓：

<%: Html.ActionLink("Add", "Create", "Agenda", new { @class = "btn btn-mini pull-left margin-10 no-margin-left border-radius-3 cbox" })%>

來源

2013-12-16 22:51:29

當加載外部JavaScript文件時，Colorbox延遲打開並「鎖定」

回答

相關問題