在 Firebase 中加载数据时运行 JQuery答案

【问题标题】：Run JQuery when data is loaded in Firebase在 Firebase 中加载数据时运行 JQuery
【发布时间】：2016-02-13 17:59:33
【问题描述】：

我有一个问题，我需要首先从 Firebase 数据库获取图像链接，然后我调用一个 JQuery 代码，它将以一种漂亮的方式组织图像 >> 但似乎 Jquery 在我获取图像之前运行, 请帮忙 ..！

JS函数

new Firebase("https://zoominp.firebaseio.com/photos/"+imageID)
    .once('value', function(snap)
    {
        link = snap.child('imageLink').val();
        link = 'images/'+link;
        var id = "img";
        div.innerHTML += "<a href=http://unitegallery.net><img data-description=aaaaa alt=HHHH data-image="+link+" src="+link+"></a>";
    });

jQuery

jQuery("#gallery").unitegallery(
{
    tiles_type:"nested",
    tiles_nested_optimal_tile_width:200
});

【问题讨论】：

标签： javascript jquery firebase

【解决方案1】：

Firebase 异步加载（和同步）数据。因此，您拥有的 jQuery 代码确实会在数据从服务器返回之前执行。

要解决此问题，请将 jQuery 代码移动到 Firebase 回调中：

var ref = new Firebase("https://zoominp.firebaseio.com/photos/"+imageID);
ref.on('value', function(snap) {
    link=snap.child('imageLink').val();
    link='images/'+link;
    var id="img";
    div.innerHTML = div.innerHTML +"<a href=http://unitegallery.net><img data-description=aaaaa alt=HHHH data-image="+link+" src="+link+"></a>";
    jQuery("#gallery").unitegallery({
        tiles_type:"nested",
        tiles_nested_optimal_tile_width:200
    });
 });

我还将once() 更改为on()。通过这个微小的更改，您的 HTML 将在数据库中的数据发生更改时更新。尝试更改数据，您将体验 Firebase 的“魔力”。

由于第一次遇到异步加载时很难理解它，我强烈建议您阅读这些问题的更深入的答案：

【讨论】：

【解决方案2】：

我从未使用过 Firebase，但您需要在运行 jQuery 之前准备好实际资源 - 您不能以同步方式执行此操作，因为当您调用 jquery unitedGallery 时，它会在 @ 之前调用987654322@ 事件触发器。

你会在循环中多次调用 new Firebase(.... 吗？你可以做一些事情，比如保留有关是否所有图像都加载到数组中的信息。像这样：假设您的图像存储在数组allOfYourImages 中。那么，

像这样定义一个全局变量

var images_loaded=[];
  for(var i=0; i<allOfYourImages.length; i++){ images_loaded[i]=false; }

然后我假设您以某种方式迭代您的图片，因为您使用的是imageID。在迭代器之前添加一个递增变量var image_number=0;，并在每次图像迭代后执行image_number++。喜欢

var image_number=0;
...iteratorofyourchoiseihavenoideawhatareyouusing...{
    new Firebase("https://zoominp.firebaseio.com/photos/"+imageID).once('value', function(snap){
      ...DOM stuff previously did ...

      images_loaded[image_number]=true;
      checkAllImagesLoaded();
    });
    image_number++;
}

注意checkAllImagesLoaded() 函数。这将查看您的所有图像是否已经加载并触发 jQuery 库的东西，就像这样

checkAllImagesLoaded(){
  var all_loaded=true;
  for(var i=0; i<allOfYourImages.length; i++){ 
    all_loaded &= images_loaded[i]; //in case any of the items is false, it will set the all_loaded to false
  }

  if(all_loaded){
    ..your jQuery.("#gallery").unitegallery stuff..
  }
}

【讨论】：