Question

我正在渲染这个视图，使用骨干，需要和下划线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;
});

加载完所有内容后，我将_hderscore模板中的html附加到我想要的元素中。

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

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

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

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

Answer 1

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

Fiddle

在Backbone视图中，在显示视图和延迟加载实际iamges之前，等待占位符图像加载

1 个答案: