Question

我正在使用underscore.js和require.js进行骨干项目。在我的视图中的所有内容都完全呈现之前，我一直坚持使用http://heartcode.robertpataki.com/canvasloader/显示加载图像。

我找到了一个使用$(window).load()的解决方案，但它对我不起作用。

以下是我的观点：

render: function(options){
        var _banner = _.template(BannerTem);
        $(window).load(function() {
           this.loadingStuff();
        });
        $(this.el).html(_banner({type : this.options.type}));
        return this;
}

在呈现骨干视图后调用

loadingStuff()。但我在这里要做的是在完全呈现视图之前调用loadingStuff()方法。

任何想法都将不胜感激。

Answer 1

在this简单小提琴中你可以找到类似的行为：

var loader = function(selector) {
    return new CanvasLoader(selector);
            cl.setColor('#877387'); // default is '#000000'
            cl.setDiameter(41); // default is 40
            cl.setDensity(50); // default is 40
            cl.setRange(1.1); // default is 1.3
            cl.setSpeed(4); // default is 2
} 

var TestView = Backbone.View.extend({
    initialize: function () {
        this.loader = loader("container");
        this.loader.show();
    },
    template: _.template($('#test-view').html()),
    el: '#container',
    render: function () {
        var template = this.template({name: "Test Product", description: "Test description"});
        this.$el.append(template);
        this.loader.hide();
    }
})


var testView = new TestView();
setTimeout(function() {testView.render();}, 3000 );

在渲染时模拟与远程或耗时操作的交互所需的超时功能。这个例子可以通过控制器的动作简单地用于你的结构。在调用动作时屏蔽容器，并在加载完成时取消屏蔽它。

如果您不再需要，请务必杀死加载程序实例。

在Backbone视图完全呈现之前显示加载画布

1 个答案: