在Firebase中加载数据时运行JQuery [英] Run JQuery when data is loaded in Firebase

问题描述

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

JS功能

 新的Firebase（https：// zoominp （'imageLink'）。
 .once（'value'，function（snap）
 {$ b $ link = snap.child（'imageLink'）。 
 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（＃gallery）。unitegallery（
 {
 tiles_type：nested，
 tiles_nested_optimal_tile_width：200 
}）; 
  

解决方案

我从来没有使用过Firebase，但是在运行jQuery之前，需要准备好实际的资源 - 不能以同步的方式来完成这项工作，例如调用jquery unitedGallery 时，会在 .once（'value'）事件触发器。

你是否会在新的Firebase（.... 做一些事情，例如保存是否把所有的图像加载到一个数组中，像这样：假设你的图像存储在一个数组 allOfYourImages 中，然后

定义一个像这样的全局变量
$ b $ $ $ pre $ var $ images $ loaded $ [$ $ b for（var i = 0; i< allOfYourImages.length; i ++）{images_loaded [i] = false;}

然后我假设你以某种方式迭代你的图片，因为你正在使用 imageID 。添加一个增量变量 var image_number = 0; code>在迭代器之前，并且在每次图像迭代之后执行 image_number ++ 类似于



  var image_number = 0; 
 ... iteratorofyourchoiseihavenoideawhatareyouusing ... {
 new Firebase（https://zoominp.firebaseio.com/photos/+ imageID）.once（'value '，函数（snap）{
 ... DOM的东西以前做... 
 
 images_loaded [image_number] = true; 
 checkAllImagesLoaded（）; 
}）; 
 image_number ++; 
 
 $ / code> 

注意 checkAllImagesLoaded（）

pre $ checkAllImagesLoaded（）{
var all_loaded = true;
for（var i = 0; i< allOfYourImages.length; i ++）{
all_loaded& = images_loaded [i]; //如果任何项目为false，则将all_loaded设置为false
}

if（all_loaded）{
..您的jQuery。（＃gallery ）.unitegallery stuff ..
}
}





i have a problem that i need first to get the image links from the Firebase data base then i call a JQuery code that will organize the images in a beautiful way >> But it seems that the Jquery runs before i get the images, Help Please ..!

JS Function

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
});

解决方案

i have never worked with a Firebase, but you will need to have your actual resources ready before running the jQuery - you cannot do this in a synchronous way, as when you call your jquery unitedGallery it is called before the .once('value') event triggers.

do you call that new Firebase(.... thing more times in a loop or something? you could do something like keeping information about whether have all the images loaded in an array. something like this: let's assume, your images are stored in an array allOfYourImages. then,

define a global variable like this

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

then i assume you somehow iterate over your pictures since you are using imageID. add an incrementing variable var image_number=0; before the iterator and do image_number++ after each image iteration. like

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++;
}

notice the checkAllImagesLoaded() function. this will look whether have all your images already loaded and fire the jQuery gallery thing, like this

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！