layzr.js不加載最後一張圖片

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中呈現。

所以我會以這種方式：

---

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 
}); 

，如果我是你，我會寫爲骨幹定製延遲加載。