Question

我在backbone.js项目中使用layzr.js，以便进行延迟加载图像。

我把它放在骨干视图中：

render: function(){
    var _item = _.template(ItemTem);
    this.$el.html(_item(this.model.toJSON()));

    $(document).ready(function() {
        var layzr = new Layzrr({
            selector: '[data-layzr]',
            attr: 'data-layzr',
            retinaAttr: 'data-layzr-retina',
            bgAttr: 'data-layzr-bg',
            threshold: 0,
            callback: null
        });
    });
    }
 });

除最后一张图片外，每张图片都能正常工作，但未加载。我不知道它有什么问题，或者我做错了什么。

我试图用搜索引擎找到我的问题的答案，但我无法做到。

Answer 1

首先从视图渲染方法中删除$(document).ready(function() {。在呈现视图之前，您应该准备好DOM。

完全删除lazyloader逻辑表单。并把它移到它的父母那里。

在将任何内容绑定到DOM之前，您需要确保在DOM中呈现视图。

所以我会这样做：

var yerrView = new YourView();
$('body').append(yerrView.render().el);
var layzr = new Layzrr({
  selector: '[data-layzr]',
  attr: 'data-layzr',
  retinaAttr: 'data-layzr-retina',
  bgAttr: 'data-layzr-bg',
  threshold: 0,
  callback: null
});

如果我是你，我会为骨干编写自定义延迟加载程序。

layzr.js未加载最后一张图片

1 个答案: