获取集合时Backbone.js进度条

Question

我想用新内容更新应用程序时显示进度条.我想最好的办法就是在集合上调用.fetch时这样做.

我获取的内容主要是图像(视频海报等),但我只获得链接,而不是base64字符串或大的东西.我想要做的是在获取图像链接时使用进度条覆盖屏幕,渲染视图以使所有图像都准备就绪,然后覆盖图应该消失并显示已加载新内容的应用程序.

现在我不知道如何为此构建一个进度条,因为我不是直接获取图像而只是链接然后渲染视图.

Answer 1

试试这个:

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)+"%");
    }
});

Answer 2

以下是一些可能有效的步骤。

1. 当获取开始时（可能使用 ajaxStart 或其他），打开弹出窗口。
2. 获取完成后，从 JSON 识别或创建图像 url，并使用多个图像预加载器之一，只要加载所有图像，这些预加载器就会回调。 如果你想自己做，我想说这将是伪代码：
   1. 将所有图像推送到一个数组中imagesurls。（这将是一个字符串数组）。
   2. 将数组长度捕获到变量中imagesleft。
   3. var imageOnLoad = function () {...}创建一个捕获该变量的 函数
      1. 减imagesleft1
      2. 执行任何更新弹出窗口所需的操作
      3. 如果imagesleft达到 0，则调用代码/方法以使弹出窗口最终消失
   4. 对于数组 imagesurls[i]中的每个字符串imagesurls
      1. 创建一个新的图像对象。var img = new Image();
      2. img.onload = imageOnLoad;
      3. img.src = imagesurls[i];

当然，我忽略错误情况（图像有一个onerror属性，您可以类似地分配，并且原始 ajax 可能会失败）。但我认为解决方案的要点就在那里。我唯一想知道的是您是否真的需要在创建每个图像对象时保留对它们的引用。这可能是一个好主意，至少在您完成整个图像集之前是这样。否则，我不得不担心垃圾收集会以某种方式干扰某些实现......但也许我只是偏执。