加载外部 javascript 文件时颜色框延迟打开和“锁定”答案

【问题标题】：Colorbox delay to open and "lock" when load external javascripts files加载外部 javascript 文件时颜色框延迟打开和“锁定”
【发布时间】：2013-12-12 03:14:36
【问题描述】：

我正在使用颜色框在我的项目中加载模式页面。当我单击打开一个模式时，页面需要一段时间才能加载，并且窗口会在一段时间内“锁定”。我做了一个简单的页面来代表我的问题。访问：http://testes.tiagocrizanto.com/ 当您单击 Index2 时，页面加载正常，但是，当您单击 Modal 链接时，模态需要一段时间才能加载（请注意，加载图像会锁定一段时间）。如果您打开 Chrome DevTools 并选择网络选项卡，您会看到加载到模式窗口中的外部 js 文件需要一段时间才能加载。在我的示例中，加载窗口需要一段时间，但是，如果我尝试加载 3 个或更多 js 文件，则模式窗口可能需要 10 秒或更长时间才能加载。

Index2 页面的代码和加载模式的脚本：

<%@ 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>

任何想法为什么会发生？

【问题讨论】：

标签： c# javascript asp.net asp.net-mvc-3 colorbox

【解决方案1】：

经过 loooonnngggg 搜索后，我找到了解决方案： optimizing colorbox and adding extra jquery

ColorBox 使用 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" })%>

【讨论】：