在Firebase中加載數據時運行JQuery

我有一個問題，首先需要從Firebase數據庫中獲取圖像鏈接，然後我調用一個將以美麗方式組織圖像的JQuery代碼>>但似乎jquery運行之前，我得到的圖像，幫助請..！在Firebase中加載數據時運行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 
});

來源

2016-02-13 Suhaybovic

火力地堡負載（和同步）異步的數據。因此，您擁有的jQuery代碼將確實在數據從服務器返回之前執行。

爲了解決這個問題，jQuery代碼移動到火力地堡回調：

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的「魔力」。

由於異步加載是很難繞到你的頭，當你第一次遇到它，我強烈建議您閱讀更深入這些問題的答案：

來源

2016-02-13 18:21:51

我從來沒有使用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.. 
    } 
}

來源

2016-02-13 18:38:40 user151496

在Firebase中加載數據時運行JQuery

回答

相關問題