Question

我有一个问题，我首先需要从Firebase数据库获取图像链接，然后我调用一个JQuery代码，以美丽的方式组织图像＆gt;＆gt;但似乎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
});

Answer 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的“神奇”。

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

Answer 2

我从未使用过Firebase，但是你需要在运行jQuery之前准备好你的实际资源 - 你不能以同步的方式做到这一点，就像你调用你的jquery unitedGallery之前一样.once('value')事件触发器。

你是在一个循环或其他东西中多次调用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..
  }
}

在Firebase中加载数据时运行JQuery

2 个答案: