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

您可以使用jQuery ajaxStart和ajaxStop来显示开始时的进度并将其隐藏起来。但是，这样做会随时显示您的指标，并在您的页面上发出ajax请求。

如果要将其限制为特定的提取，则可以采用的路径是覆盖该集合或模型中的sync方法，并使用显示和隐藏进度条的某些代码包装默认同步。

Answer 3

在您获取集合之前，请设置进度条。收集完成后，您将图像渲染到DOM添加listeners to the image load events。成功加载所有图像后，删除进度条。

如果图像无法加载，您将需要确保您还在监听加载失败，因为在这种情况下进度条永远不会被删除。

Answer 4

以下是可能会解决的一些步骤。

当提取开始时（可能使用ajaxStart或其他），启动你的流行音乐。
当获取完成时，从JSON中识别或创建图像URL，并使用其中一个图像预加载器中的一个，每当加载所有图像时都有回调。 如果你想自己做，我会说这将是伪造的代码：
1. 将所有图片推送到数组imagesurls。（这将是一个字符串数组）。
2. 将数组长度捕获到变量imagesleft。
3. 创建捕获该变量的函数var imageOnLoad = function () {...}
  1. 将imagesleft递减1
  2. 是否需要更新popover
  3. 如果imagesleft达到0，则调用代码/方法以使popover最终消失
4. 对于imagesurls[i]数组中的每个字符串imagesurls
  1. 创建一个新的Image对象。 var img = new Image();
  2. img.onload = imageOnLoad;
  3. img.src = imagesurls[i];

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

Answer 5

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

然后将options.success函数传递给将其作为屏幕的fetch方法（docs）。

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

我们将其用于我们的一个视图，并使用options.success方法

将其拉出

Answer 6

覆盖骨干同步方法，而不是写每个地方将其添加到同步方法。它适用于新页面而无需编写任何新代码。

获取集合时Backbone.js进度条

6 个答案: