Backbone.js的进度栏获取集合 [英] Backbone.js progress bar while fetching collection

问题描述

我想展示一个进度条，而我更新新的内容的应用程序。我想这样做是做，而在集合调用.fetch的最好的事情。

我获取内容主要是图像（视频海报等），但我只得到该链接，而不是一个base64字符串或一件大事。我想这样做是一个进度条覆盖的屏幕，同时取的图片链接，渲染视图，以便所有图像都准备好，然后叠加应该消失，显示出与新鲜内容的应用程序已经加载。

现在我不知道我怎么能建立这样一个进度条，因为我没有真正直接，但只有链接获取图像，然后渲染视图。

解决方案

下面是一些步骤，可能工作了。

1. 当抓取开始（可能使用ajaxStart或其他），调出
   弹出式广告了。


2. 当抓取结束，识别或创建从JSON图片网址，并使用多种图像preloaders在那里，只要有所有的图像加载回调之一。的如果你想使自己的，我会说这将是该伪code：的
   
   
   
   1. 所有的图像推到一个数组 imagesurls 。 （这将是一个字符串数组）。
   
   
   2. 拍摄数组的长度到一个变量 imagesleft 。
   
   
   3. 创建一个函数 VAR imageOnLoad =功能（）{...} 捕捉的变量，
      
      
      
      1. 递减 imagesleft 1
      
      
      2. 为所欲为它需要更新酥料饼
      
      
      3. 如果 imagesleft 为0时，调用code /法引起酥料饼，以最终消失
      
      
   
   
   4. 对于每个 imagesurls 数组中的字符串 imagesurls [I] 的
      
      
      
      1. 创建一个新的Image对象。 IMG VAR =新的图像（）;
      
      
      2. img.onload = imageOnLoad;
      
      
      3. img.src = imagesurls [I];
      
      
   
   

当然，我忽略错误情境（图片有一个的onerror 属性，你可以同样分配和原阿贾克斯可能会失败）。但我认为一个解决方案的要点是存在的。我想了解一下唯一的一点是你是否真的需要一个参考保持在每个图像的对象为正在创建它们。这可能是一个好主意，至少直到你与整个图像集完成。否则，我担心垃圾收集在一些实施莫名其妙的干扰......但那么也许我只是偏执。

i'd like to show a progress bar while i update the app with fresh content. I guess the best thing to do would be to do it while calling .fetch on a collection.

The content i fetch is primarily images (video poster etc) but i only get the link, not a base64 string or something big. What i would like to do is overlay the screen with a progress bar while fetching the image links, render the view so all images are ready and then the overlay should go away and show the app with the fresh content already loaded.

Now i have no idea how i could build a progress bar for this since i am not really getting images directly but only the link and then rendering the view.

解决方案

Here's some steps that might work out.

1. when the fetch starts (maybe using ajaxStart or whatever), bring up your pop-over.
2. when the fetch finishes, identify or create the image urls from the JSON and use one of the several image preloaders out there that have a callback whenever all the images are loaded. If you want to make that yourself, I'd say this would be the psuedocode for that:
   1. Push all your images to an array imagesurls. (this will be an array of strings).
   2. Capture the array length into a variable imagesleft.
   3. Create a function var imageOnLoad = function () {...} capturing that variable which
      1. decrements imagesleft by 1
      2. Does whatever it needs to to update the popover
      3. if imagesleft reaches 0, invoke the code/method to cause the popover to eventually go away

   4. For each of the strings imagesurls[i] in the imagesurls array
      1. create a new Image object. var img = new Image();
      2. img.onload = imageOnLoad;
      3. img.src = imagesurls[i];

Of course I'm ignoring error situations (Images have an onerror property you could assign similarly and the original ajax could fail). but I think the gist of a solution is there. The only thing I'm wondering about is whether or not you actually need to keep a reference to each of the images objects as they're being created. It might be a good idea, at least until you are done with the whole image set. Otherwise, I'd have to worry about garbage collection somehow interfering in some implementation... but then maybe I'm just being paranoid.

这篇关于Backbone.js的进度栏获取集合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！