백본과 함께 outerHeight()를 사용하는 데 문제가 있습니다

Question

나는 pinterest 같은 효과를 만들고 wedding.reposition()을 통해 div의 위치를 ​​설정하려고합니다. 그러나 outerHeight() 함수는 0px를 반환하기 때문에 작동하지 않는다고 생각합니다. 이것은 이미지가 아직로드되지 않았기 때문이라고 생각했지만 관련 div가로드되고 DOM에 추가 된 후에 만 ​​wedding.reposition()을 호출합니다 (추가는 동기식입니까?).

흥미롭게도 몇 초 후에 setTimeout 함수를 통해 wedding.reposition을 실행하면 작동합니다. 누군가가 이것에 대한 해결책을 가지고 있는지 궁금해할까요? 당신이 DOM에 추가 될 수 있지만

//repositions all the elements on the page 
wedding.reposition = function() { 
    var $post = $(".post"); 
    //sets col position classes 
    for(var i = 0, len = $post.length; i < len; i++) { 
     //starts from base 1 rather than base 0 
     var colClass = "col" + (i % 4 + 1); 
     $post.eq(i).addClass(colClass); 

     //implies it is on the second or greater row 
     if(i >= 4) { 
     var $col = $("." + colClass); 
     //gets row of the element in the current column 
     var row = Math.floor(i/4); 
     var $prev = $col.eq(row - 1); 

     //determines the height of the current object 
     console.log($prev.outerHeight()); 
     var currentObjectHeight = $prev.position().top + $prev.outerHeight() + 15; 
     $col.eq(row).css("top", currentObjectHeight); 
     } 
    }; 
}; 



//PostsView corresponds to the overall view holding individual PostView 
wedding.views.PostsView = Backbone.View.extend({ 
    el: "#column-container", 

    initialize: function(){ 
    _.bindAll(this); 
    this.collection.on("reset", this.render); 

    this.collection.fetch(); 
    }, 

    render: function(){ 

    this.collection.each(function(model) { 
     this.initializePostView(model); 
    }, this); 
    wedding.reposition(); 

    }, 

    initializePostView: function(model) { 
    var html = new wedding.views.PostView({model: model}); 
    this.$el.append(html.render().el); 

    } 

}); 


wedding.views.PostView = Backbone.View.extend({ 

    className: "post", 
    template: "#post-template", 

    initialize: function(options) { 
    _.bindAll(this); 
    this.template = _.template($(this.template).html()); 
    }, 

    render: function() { 
    this.preload(); 
    return this; 
    }, 

    preload: function() { 
    var image = new Image(); 
    var that = this; 
    image.src = this.model.get("src"); 

    image.onload = function() { 
     var html = that.template({model: that.model.toJSON() }); 
     that.$el.append(html); 
    }; 
    } 
}); 

Answer 1

, 그것은 이미지가 다운로드됩니다 의미하지 않는다.

이미지에 load 이벤트를 사용하거나 waitForImages과 같은 플러그인을 사용하십시오.