CODEWITHSUNDEEP
javascriptjquerybackbone.js
webmasters
webmasters

Reputation: 5841

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

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.

Upvotes: 0

Views: 1258

Answers (1)

pdoherty926
pdoherty926

Reputation: 10379

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

Fiddle

Upvotes: 1

Related Questions