Fullcalendar 布局损坏，因为在 javascript 布局计算后加载 CSS答案

【问题标题】：Fullcalendar layout broken because CSS loading after javascript layout calculationsFullcalendar 布局损坏，因为在 javascript 布局计算后加载 CSS
【发布时间】：2014-08-14 23:14:44
【问题描述】：

我在 Web 应用程序框架插件中使用 FullCalendar jQuery 插件。

fullcalendar.css 等其他 CSS 文件在 javascript 中动态加载：

$("<link rel='stylesheet' type='text/css' href='fullcalendar.css' />").appendTo("head");

fullcalendar.js 呈现（和定位）日历事件。如果 fullcalendar.css 文件此时尚未加载，并且在 CSS 加载后“移动”到屏幕外，则位置计算错误。

jsfiddle Demo

我怎样才能避免这种情况？是全日历的问题吗？

编辑：我找到了$(window).load() 事件。 ''似乎''如果我移动 JS 调用以在那里初始化 fullcalendar，问题就会消失。这是个坏主意吗？

【问题讨论】：

动态加载 CSS 有什么原因吗？似乎简单的解决方案是在head 中进行静态加载。
是的，因为它是一个应用程序框架插件。后期才激活，到时候头部的创建早就完成了。
在您使用appendTo 添加css 之后是否可以插入您的FullCalendar JS？
appendTo 先发生，但由于某种原因需要更长的时间。

标签： jquery css fullcalendar

【解决方案1】：

您需要将 fullCalendar 脚本的加载推迟到 CSS 文件附加到 head 标签之后：

Demo

$(document).on("ready", function() {

    $("<link rel='stylesheet' type='text/css' href='fullcalendar.css' />").appendTo("head");

    $(window).on("load", function() {

        $('#calendar').fullCalendar({
            defaultDate: '2014-06-12',
            events: [
                {
                    title: 'Should be June 1!',
                    start: '2014-06-01'
                },
            ]
        });        
    });    
});

在这种情况下，CSS 文件会在 DOM 准备就绪时附加，但您的脚本会在 DOM 完成加载时触发。

另一种方法是使用专为加载脚本而设计的 jQuery 的 holdReady() 方法：

holdReady();

$.holdReady( true );

// do something and when ready...

$.holdReady( false );

【讨论】：

我现在正在使用 $(window).load() ，这似乎相当于你的第一种方法，所以我会接受这个答案。
holdReady() 看起来很有趣。但是在这种特定情况下，我会在哪里调用 holdReady(false)？
@Peter 您将设置holdReady(true); 然后您将不得不使用setInterval() 并检查该CSS 文件中的属性是否已每50 毫秒左右应用于一个元素。如果元素具有该属性，您可以设置holdReady(false)，然后设置clearInterval()。与加载方法相比，这是一种相当冗长的方法，这就是为什么我建议将其作为替代方法。您可能可以这样做的另一种方法（尽管未经测试）是将您的 CSS 文件附加到头部，但在关闭正文标记之前将您的日历脚本作为页面上的最后一个元素添加到脚本标记。