Head和Body分离架构下的加载顺序和触发事件的问题

我们采用head和body两个预加载页面作为整个app的通用模板页和内容页。
官方在mui的demo中有一段代码：
bodyWebView.addEventListener('loaded', function() {
setTimeout(function() {
bodyWebView.show();
}, 50);
});

现在有个业务需求：
新闻页面List.html
新闻详情页面Detail.html
点击某条新闻跳转到Detail页面，detail页面通过list页面的新闻ID发出ajax请求获取新闻详情。

list.html中的处理方式为：
bodyWebView.loadURL(detail.html) //内容模板页加载新的detail
headWebView.show(); //框架模板页显示
mui.fire(detailWebView, 'showNews', {id:1}) //触发detail.html中的获取新闻并且显示新闻内容的自定义事件

以上为伪代码，并不一定能执行，但是思路如此。
现在有2个问题：
1.detail.html在被loading的时候，我们就调用mui.fire方法触发事件，有可能detail页面的这个showNews自定义事件还没被加载，导致fire失败。我最后通过定时器的方式延迟fire事件，但是始终觉的不可靠，毕必定这个时间不好控制。
2.官方在如何提升性能避免白屏的教材中说到，若有联网获取数据的行为，建议bodyWebView等待ajax获取完毕之后一起显示出来，可以避免2次加载等待问题。所以上面的执行顺序应该为：
显示headWebView->更改bodyWebView.url为新闻详情页->等待新闻详情页dom结构加载完毕->mui.fire触发新闻详情页的获取数据事件->自定义事件获取服务端数据->显示bodyWebView页面。 思路很清晰，但是代码不知道如何组织，因为我们的真个app的body和header模板页都是在index.html中加载的，可以说是公用的模板页。

希望各位大大能帮忙一下。谢谢