Question

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.

Answer 1

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.