获取集合时的Backbone.js进度条

我想在用新内容更新应用程序时显示进度条。我想最好的办法是在打电话的时候去做。去收集

我获取的内容主要是图像（视频海报等），但我只获取链接，而不是base64字符串或其他大的内容。我想做的是在抓取图像链接时用进度条覆盖屏幕，渲染视图，使所有图像都准备好，然后覆盖应该消失，并显示已加载新内容的应用程序

---

现在我不知道如何为此构建进度条，因为我实际上不是直接获取图像，而是仅获取链接，然后渲染视图。

当您调用fetch时，请设置加载条

然后将函数作为

options.success

传递给将其带到屏幕的

fetch

方法（）

或者，当您将对象渲染到屏幕上时，可以将其向下拉

---

我们将其用于其中一个视图，只需使用

选项即可。success

方法您可以使用jQuery

ajaxStart

和

ajaxStop

显示开始时的进度，并在结束时隐藏它。然而，这样做会在任何时候显示您的指示器，并且ajax请求会出现在您的页面上

---

如果您想将其限制在特定的获取范围内，您可以采取的一种方法是覆盖该集合或模型中的同步方法，并使用一些显示和隐藏进度条的代码包装默认同步。

在获取集合之前，请设置进度条。收集完成并将图像渲染到DOM add时。成功加载所有图像后，删除进度条

---

您需要确保在图像未加载的情况下也在侦听加载失败，因为在这种情况下，进度条将永远不会被删除。

以下是一些可能解决问题的步骤

当提取开始时（可能使用ajaxStart或其他方法），打开 你的爸爸过来了

获取完成后，从JSON中识别或创建图像URL，并使用几个图像预加载程序中的一个，这些预加载程序在加载所有图像时都有回调。如果你想自己做，我会说这是它的伪代码：

将所有图像推送到阵列

imagesurls

。（这将是一个字符串数组）

将数组长度捕获到变量

imagesleft

中

创建一个函数

var imageOnLoad=function（）{…}

捕获

将

imagesleft

递减1

执行更新popover所需的任何操作

如果

imagesleft

达到0，则调用代码/方法以使popover最终消失

对于

imagesurls

数组中的每个字符串

imagesurls[i]

创建一个新的图像对象<代码>var img=新图像（）

img.onload=imageOnLoad

img.src=imagesurls[i]

当然，我忽略了错误情况（图像有一个

onerror

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

试试这个：

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

---

覆盖主干同步方法，而不是写入每个位置将其添加到同步方法。它将在不编写任何新代码的情况下为新页面工作

那不是一个“假”预装器吗？我的意思是，fetch只从服务器上获取一些字符串，这非常快，所以覆盖层只会在服务器上来回闪烁。当获取的内容（图像）加载到DOM中时，我需要预加载的内容消失。然后做同样的事情，只是不要打开加载屏幕，而是传递一个函数作为

选项。成功

删除预加载的内容。我不确定你的意思。我需要在加载所有图像并准备好DOM后，移除预加载程序。很抱歉，如果我错过了一些东西，但我不明白“不要放置加载屏幕”对我有什么帮助：）我以为你说你不想要加载屏幕，但想转储内容。无论如何，这个概念仍然是一样的：抛出一个加载屏幕。然后，不要从

选项中下拉加载屏幕。成功

从任何将图像添加到DOM的地方下拉加载屏幕。我的意思是，你从服务器那里得到了什么？图像URL？如果是这样，那么您将生成图像标记并以编程方式将它们添加到dom中，对吗？是的，我将所有图像作为带有图像url的主干模型进行JSON输出，我有一个模板（Eco Template Engine），其中有图像视图模板的标记。然后我就用这个模板渲染视图。这将非常有帮助，谢谢。我将在试用后将其标记为解决方案我可能误读了您试图加载的内容。这将允许您监视模型或集合获取的进度。我需要对进度条执行类似的操作，但应该支持IE8和IE9。但IE9及以下版本不支持“onprogress”事件。还有其他选择吗？如何使LengthComputeable等于true？@0和1检查这个问题：