pourquoi ne peut pas obtenir la taille de l'élément dans le backbone quand la première page se charge?

Question

En CSS, la hauteur et la largeur de l'élément sont définies sur auto. Je voudrais obtenir la hauteur de cet élément après la première page de chargement. Je vérifie $ ('# minor'), et il a clientHeight: 333, clientWidth: 826, mais ne peut pas obtenir la valeur de clientHeight, clientWidth, offsetHeight et offsetWidth. Cependant, je peux obtenir d'autres propriétés de $ ('# mineur') correctement. Par ailleurs, je peux obtenir le clientWidth de #gallery et #image_holder, bien que leur largeur soit également définie sur auto.

Pour clientHeight, tous les éléments de la ClientHeight ne peux pas être obtenu correctement, il retourne toujours 20

code de la vue Backbone:

var SubheaderView = Backbone.View.extend({ 
    id: 'gallery', 
    tagName: 'div', 

    initialize: function() { 
     $(window).on('resize', this.updateCss); #=> it works correctly 
     this.render(); 
    }, 

    render: function() { 
     this.$el.append(subheaderTemplate); 
     var that = this; 
     _.defer(function(){ 
      that.updateCss(); 
     }); 

     return this; 
    }, 

    updateCss: function() {  
     console.log($('#minor')[0].clientHeight); #=> it still return 20 
     console.log($('#minor')[0].clientWidth); #=> it still return 0 
     console.log($('#minor')[0].localName); #=> it return div 
    } 
}); 

subheaderTemplate html code:

<div id="image_wrapper"> 
    <div id="image_holder"> 
     <div class="image_item" id="major"> 
      <img src="media/images/test/image1.png" alt="major image"> 
     </div> 

     <div class="image_item" id="minor"> 
      <img src="media/images/test/image2.png" alt="minor image"> 

      <div id="cover"> 
       <h1>Over 196 Homes<br>Sold a Week<br>Through Real Estate</h1> 
      </div> 
     </div> 

     <div class="image_item"> 
      <img src="media/images/test/image3.png"alt="image"> 
     </div> 
     <div class="clearfix"></div> 
    </div> 
</div> 

fichier CSS:

#gallery { 
    margin-top: 1px; 
    width: auto; 
    height: auto; 
    background-color: #fefefe; 
} 

#image_wrapper { 
    width: 87%; 
    height: auto; 
    margin: 0px auto 0px auto; 
    overflow: visible; 
} 

#image_holder { 
    width: auto; 
    height: auto; 
} 

#image_wrapper .image_item { 
    position: relative; 
    width: auto; 
    height: auto; 
    float: left; 
    background-color: blue; 
    border: none; 
} 

#minor { 
    overflow: hidden; 
} 

#image_wrapper img { 
    width: 100%; 
    border: none; 
} 

#cover { 
    position: absolute; 
    top: 0px; 
    width: 100%; 
    height: 337px; 
    background-color: #101010; 
    background-color: rgba(16,16,16,0.7); 
} 

#cover h1 { 
    color: #b7aeab; 
    line-height: 97%; 
    font-size: 33px; 
    padding: 133px 0px 0px 39px; 
} 

Answer 1

Les calculs de hauteur et de largeur sont basés sur d'autres éléments, donc je crois que le navigateur ne peut pas vous les dire avant d'avoir chargé plus de la page. Même un defer peut ne pas être assez long, puisqu'il ne fait que 1 ms.

Avez-vous essayé de placer votre code de contrôle de hauteur dans un bloc , avec quelque chose comme ça?

$(function() { 
    alert($('#minor').height()); 
}); 

Sinon je vais essayer cela, ou peut-être même:

$('body').on('load', function() { 
    alert($('#minor').height()); 
}); 

Answer 2

_.defer rend le code asynchrone, mais il ne garantit pas que votre image a fini de charger avant d'appeler. Le <img> sera ajouté au dom, mais chargement des images de manière asynchrone et est donc peu probable d'avoir le chargement terminé avant d'appeler updateCss()

Vous devriez essayer d'ajouter un gestionnaire onload à l'image à la place:

render: function() { 
    this.$el.append(subheaderTemplate); 
    var that = this; 
    $("#minor").on("load", function() { 
     that.updateCss(); 
    }); 

    return this; 
}, 

Il devrait noter que l'événement de charge n'est pas standard sur <img> alors méfiez-vous.