Backbone.js進度條，而取回集合

我想顯示一個進度條，而我更新應用程序與新鮮的內容。我想最好的做法是在調用集合中的.fetch時做到這一點。Backbone.js進度條，而取回集合

我提取的內容主要是圖片（視頻海報等），但我只得到鏈接，而不是base64字符串或大的東西。我想要做的是在獲取圖像鏈接時使用進度條覆蓋屏幕，渲染視圖以便所有圖像都準備就緒，然後覆蓋層應該消失，並顯示已添加新鮮內容的應用程序。

現在我不知道如何建立一個進度條，因爲我沒有真正直接獲取圖像，只有鏈接，然後渲染視圖。

2012-03-21 Drazen Mokic

下面是一些可能解決的步驟。

當提取開始時（可能使用ajaxStart或其他），調出您的彈出窗口。
當抓取完成時，從JSON中識別或創建圖像url，並使用其中一個圖像預加載器，每當所有圖像加載時都有回調。 如果你想自己做，我會說這將是psuedocode爲：
1. 推你的所有圖像到一個數組imagesurls。（這將是一個字符串數組）。
2. 將數組長度捕獲到變量imagesleft。
3. 創建函數var imageOnLoad = function() {...}捕獲變量，它
  1. 遞減imagesleft由1
  2. 不不管它需要
  3. 如果imagesleft達到0到更新酥料餅，調用代碼/方法以使酥料餅的最終走
4. 對於每個串imagesurls[i]的imagesurls陣列中
  1. 創建一個新的圖像對象。 var img = new Image();
  2. img.onload = imageOnLoad;
  3. img.src = imagesurls[i];

當然，我忽略了錯誤的情況下（圖片有onerror屬性，你可以同樣分配和原阿賈克斯可能會失敗）組成。但我認爲解決方案的要點在那裏。我唯一想知道的是你是否確實需要在每個圖像對象創建時都保留一個引用。這可能是一個好主意，至少在你完成整個圖像集之前。否則，我不得不擔心垃圾收集會干擾某些實現......但是也許我只是偏執狂。

來源

2012-03-21 19:19:05 JayC

這會有很大的幫助。在我試用之後，我會將其標記爲解決方案 – 2012-03-21 19:56:52

看來您還沒有嘗試過:) – Seer 2013-10-25 06:56:17

幾年更聰明，這是正確的方法:) – 2016-01-11 11:06:59

當你調用fetch放置你的加載欄。

然後將函數options.success傳遞給fetch方法（docs），該函數將其作爲屏幕。或者，當您將對象渲染到屏幕上時，您可以將其拉下。

我們使用此爲我們的意見之一，只是用options.success方法

來源

2012-03-21 03:02:47 tkone

這不是一個'假'preloader？我的意思是.fetch只能從服務器獲取一些字符串，這非常快，所以疊加層只會閃爍。我需要預加載在抓取（圖像）的內容加載並在DOM中消失。 – 2012-03-21 15:02:20

然後做同樣的事情，只是不要加載屏幕，而是傳遞一個函數作爲'options.success'來移除預加載的內容。 – tkone 2012-03-21 15:12:01

我不確定你的意思。在加載所有圖像並準備好DOM後，我需要預加載器才能離開。對不起，如果我錯過了什麼，但我不明白「不要把一個加載屏幕」如何幫助我:) – 2012-03-21 18:38:41

您可以使用jQuery ajaxStart和ajaxStop顯示在啓動的進展，並隱藏在年底把它關閉。但是，這樣做會隨時顯示您的指示器，並在您的頁面上發出ajax請求。

如果您想將其限制爲僅執行特定的獲取，則可以採用的路線是覆蓋該集合或模型中的同步方法，並使用顯示並隱藏進度欄的某些代碼包裝默認同步。

來源

2012-03-21 03:39:44 ryanmarc

在獲取集合之前，需要設置進度條。當收集完成並且您將圖像渲染到DOM時，添加listeners to the image load events。當所有圖像成功加載後，請移除進度條。

由於在這種情況下進度條永遠不會被刪除，您將需要確保您也正在偵聽加載失敗，因爲圖像無法加載。

來源

2012-03-21 18:50:26 abraham

試試這個：

var SomeView = Backbone.View.extend({ 
    loadStuff: function(){ 
     var self = this; 
     someModel.fetch({ 
      xhr: function() { 
       var xhr = $.ajaxSettings.xhr(); 
       xhr.onprogress = self.handleProgress; 
       return xhr; 
      } 
     }); 
    }, 
    handleProgress: function(evt){ 
     var percentComplete = 0; 
     if (evt.lengthComputable) { 
      percentComplete = evt.loaded/evt.total; 
     } 
     //console.log(Math.round(percentComplete * 100)+"%"); 
    } 
});

來源

2012-05-09 04:28:01

我可能誤解了您嘗試加載的內容。這將允許您監視模型或集合提取的進度。 – 2012-05-09 04:32:54

我需要爲進度條做類似的事情，但應該支持IE8和IE9。但IE9及以下版本不支持「進行中」事件。還有其他的選擇嗎？ – 2015-07-17 07:38:09

如何獲得lengthComputable等於true？ – 2016-08-06 19:45:52

覆蓋骨幹同步的方法，而不是寫每一個地方把它添加到同步方法。它將用於新頁面而無需編寫任何新代碼。

來源

2014-10-08 10:56:02

Backbone.js進度條，而取回集合

回答

相關問題