Javascript 在主干视图中，等待占位符图像加载，然后显示视图并延迟加载实际图像

我使用主干、require和下划线js呈现此视图：

define([
    'jquery', 
    'underscore', 
    'backbone',
    'collections/performers',
    'text!templates/listPerformers.html',
    'lazy'
], function ($, _, Backbone, Performers, listPerformersTpl) {

    var ListPerformers = Backbone.View.extend({

        el : '.models',

        render : function () {

            var that = this,

                performers = new Performers(),

                nonce = that.$el.data('nonce');

            performers.fetch({

                dataType : "json",

                data : {action: "dxx_ajax", nonce: nonce},

                success : function (performers) {

                    var template = _.template(listPerformersTpl, {performers: performers.models});

                    that.$el.append(template);

                    setTimeout(function(){ 

                        $("img.lazy").lazyload({
                            effect : "fadeIn"
                        });

                    }, 50);
                }
            });
        }
    });

    return ListPerformers;
});

加载完所有内容后，我在所需元素中添加了一个_下划线模板中的html

模板具有占位符图像-加载gif。

在此之后，我使用延迟加载来加载实际图像，替换加载的gif

我的问题是，在确定已加载占位符图像（正在加载的GIF）之后，我需要一种显示视图的方法。

html（）和append（）jquery函数没有回调，所以我不确定处理这个问题的最佳方法是什么

var loader = new Image();
loader.onload = function () { console.log('loader loaded - render view'); }
loader.src = 'http://placekitten.com/40/40';

了解如何选择图像，绑定到onload，然后触发load（如果图像在绑定之前已经完成）。使用这个想法，您可以通过附加html，

$el.find

'ing所有附加的加载程序图像，对它们进行计数，然后在所有图像完成加载后触发视图显示来实现所需的功能。