关于iframe版本里面的加载动画

大家应该注意到，v5的iframe版本比之前的版本多了一个加载等待的动画，因为之前v3和v4的时候有不少小伙伴问这个问题，结合整个模板来说确实也稍微有些复杂，所以在v5版本里面才去实现。

这里简单说一下大概的逻辑，有些小伙伴可能觉得有些慢。但是需要说明一下的是，因为目前iframe版本也做了主题，主题切换或者已经保存了新主题的时候，打开tab，浏览器会有一个闪动的bug，因为iframe里面的页面和index主页是分开的，每次打开一个新页面，页面会有一个从白色到你设定的主题色的一个渐变过程，看起来就相当于闪一下。loading加载也是为了掩盖这个缺陷。

下面说一下具体逻辑： 1、用户点击菜单链接，tab打开时，会开启加载动画。

// multitabs.js里面大概355行。
$('#lyear-loading').fadeIn('fast', function () {
    $tabPane.attr('src', param.url);
});

2、iframe绑定了load事件，页面加载后，回调用index.min.js里面的方法设置主题颜色，然后将其关闭。

if(!$tabPane[0].addEventListener){
    $tabPane[0].attachEvent('onload', function () {
        callbackTheme($tabPane, function () {
            $('#lyear-loading').fadeOut('slow');
        });
    });
}
$tabPane[0].addEventListener('load', function () {
    callbackTheme($tabPane, function () {
        $('#lyear-loading').fadeOut('slow');
    });
}, true);

//index.min.js大概155行
// 回调主题配色
callbackTheme = function ($v, callback) {
    $v.contents().find('body').attr('data-theme', $.cookie('the_site_theme'));
    if (typeof callback === 'function') {
        setTimeout(callback, 200);
    }
};

3、main.min.js有一个pageHide事件，就是你在关闭当前页面时会触发加载动画（这个会很快关闭，现在我也忘记是为啥要加这个了，反正是之前测试时候有用O(∩_∩)O哈哈~）。

// main.min.js大概216行
window.onpagehide = function () {
    parent.$('#lyear-loading').fadeIn(1);
};

4、还有一个就是增加了一个removeNode事件

// main.min.js 大概208行
if (parent.$._data(parent.$('.mt-tab-content')[0], "events") === undefined || parent.$._data(parent.$('.mt-tab-content')[0], "events").removeNode === undefined) {
    var $loading = parent.$("#lyear-loading");
    parent.$('.mt-tab-content').on('removeNode', function() {    
        if ($loading.is(":visible")) {
            $loading.fadeOut('slow');
        }
    });
}

之前有小伙伴觉得时间太长，想要去掉这个，因为涉及的地方比较多，不熟悉js的小伙伴不太好操作删除。

这里可以将时间改短一下。

加载动画使用fadeIn('fast')载入，fadeOut('slow')淡出。回调这里用了setTimeout(callback, 200);延迟200毫秒执行。

slow是600毫秒，fast是200毫秒，还有延迟的200毫秒。

小伙伴们可以将slow改成fast，并将setTimeout里面的200改小。