简体   繁体   中英

Colorbox delay to open and “lock” when load external javascripts files

I'm using colorbox to load modal pages in my project. When I click to open one modal, the page takes a time to load and the window "lock" during a period. I made a simple page to represent my problem. Access: http://testes.tiagocrizanto.com/ When you click at Index2 the page load normally, but, when you click at Modal link the modal takes a time to load (note that the loading image lock for a while). If you open Chrome DevTools and select network tab you'll see the external js files loaded into modal window takes a time to load. In my example the window takes a while for load, but, if I try to load 3 or more js files the modal window could take 10 or more seconds to load.

Code to of the Index2 page and script to load modal:

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

Modal code:

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

Any ideas why it happening?

After a loooonnngggg search I found the solution: optimizing colorbox and adding extra jquery

ColorBox uses jQuery's load() method for it's ajax handling, so you just need to add the desired selector to the link's href.

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

Link buton:

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM