等到页面加载之前完成异步操作(firebase)调用

时间:2015-01-08 03:55:58

标签: javascript jquery asynchronous firebase

我尝试执行异步操作,以获取数据并影响我的网页样式。

有没有办法在页面加载之前完成此操作?由于我想要更改div元素的实际属性,我知道这不太可能,但我想让你的家伙了解如何实现这一点。

也许通过将数据存储在浏览器会话中,或者只需要思考一个?我不确定

var grab_user = new Firebase("https://<FIREBASE>.firebaseio.com/users/"+auth.uid);
//grab data from firebase
grab_user.once('value', function (dataSnapshot) {
    var $user = dataSnapshot.val();

    //if the user has this object,
    //change the head color to whats in their settings
    if($user.whitelabel)
        $("#top-header").css('background-color', $user.whitelabel.color);
});

1 个答案:

答案 0 :(得分:3)

不。在Firebase中加载数据(以及现代Web的任何其他部分)都是异步的,您必须在代码中处理它。

如果您的div在数据可用之前无法正常呈现,则只应在从Firebase加载数据后将其添加到页面(或显示在页面上)。

因此,请将您的标题隐藏在CSS(#top-header: { display: none })中,然后将代码更改为:

var grab_user = new Firebase("https://<FIREBASE>.firebaseio.com/users/"+auth.uid);
//grab data from firebase
grab_user.once('value', function (dataSnapshot) {
    var $user = dataSnapshot.val();

    //if the user has this object,
    //change the head color to whats in their settings
    if($user.whitelabel) {
        $("#top-header").css('background-color', $user.whitelabel.color);
        $("#top-header").show(); // now we're ready to show the header
    }
});

如果整个页面都应隐藏,直到标题有背景颜色,您还可以将body标记为隐藏在CSS中,然后在数据可用时显示 。< / p>