CODEWITHSUNDEEP
javascriptbackbone.jslazy-loading
swayziak
swayziak

Reputation: 353

Using lazy loading with Backbone

I'm trying to use this lazy loading plugin in a backbone app, I adapted the template to work with the plugin and called and the plugin script in but it doesn't work. Here is the jsfiddle:http://jsfiddle.net/swayziak/9R9zU/27/

The template:

<script id="bookTemplate" type="text/template">
    <img src="https://www.amrms.com/ssl/iftafoundation/bluepay/Images/Loading_Animation.gif" data-src="<%= image %>"/>
    <h2 class="bookTitle"><%= title %><h2>
</script>

And the script on document ready:

$(document).ready(function() {
    $("img").unveil();
});

I don't know what's wrong with my code.

Upvotes: 2

Views: 2235

Answers (2)

ekeren
ekeren

Reputation: 3458

You have a problem with version of Zepto, unveil uses filter function that was updated in zepto latest version: (from http://zeptojs.com/#changelog)

New features

 $.fn.filter(function(index){ ... })

Check out updated jsfiddle (http://jsfiddle.net/9R9zU/41/) that uses http://zeptojs.com/zepto.js source.

EDIT:

to make the entire example work I moved the unveil call to the view render function (http://jsfiddle.net/9R9zU/52/)

app.BookView = Backbone.View.extend ({
  tagName: 'div',
  className: 'book',
  template: _.template( $( '#bookTemplate' ).html()),
  render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    this.$el.find("img").unveil();//for every render we run the lazy loader
    return this;
  }
});

Upvotes: 1

Vitalii Petrychuk
Vitalii Petrychuk

Reputation: 14225

First of all you are using incorrect path to the plugin in your fiddle. Another one thing why it is not working is related to the place where you put plugin initialization. You initialize it on the document ready but your images is not rendered yet. So you have to initialize plugin after rendering the view (when images are added to the DOM).

Upvotes: 1

Related Questions