Inside a Backbone view, wait for the placeholder images to load, before displaying the view and lazy-loading actual iamges

Question

I am rendering this view, using backbone, require and underscore 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;
});

After everything is loaded, I append the html from an _underscore template, inside my desired element.

The template has placeholder images - a loading gif.

After this, I use lazy-load to load the actual images, replacing the loading gifs.

My problem is that I need a way to show the view, after I know for sure that my placeholder images (the loading gifs) are loaded.

The html() and append() jquery functions have no callback, so I am not sure what is the best way to handle this.

Take a look at [this answer](http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached) for how to select images, bind to onload, then fire load (if the image is already complete prior to the binding). Using this idea you could achieve what you want by appending the html, `$el.find`'ing all the appended loader images, counting them, then triggering your view show when all images have completed loading. — numbers1311407, Nov 16 '13 at 22:02

score 1 · Accepted Answer · answered Nov 16 '13 at 21:46

1

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

Fiddle

answered Nov 16 '13 at 21:46

pdoherty926

9,895
4
37
68

Inside a Backbone view, wait for the placeholder images to load, before displaying the view and lazy-loading actual iamges

1 Answers1