ネットワークから画像をロードした後のアイアンリストオーバーラップペーパーカード

Question

私はペーパーカードでポリマーiron-listを使用していますが、デバイスの向きを変えるまではすべてのカードが重なっています。 paper-cardの画像ロード後にのiron-listに電話する方法を教えてください。

<iron-list items="[[data.data]]" as="item" scroll-target="document"> 
     <template> 

      <div style="margin-top: 20px"> 

       <!--Card with header image--> 
       <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000" alt="Emmental"> 
        <div class="card-content"> 
         <b>#[[index]] - [[item.category]]</b> 
         <p>[[item.heading]]</p> 
        </div> 
        <div class="card-actions"> 
         <paper-button>Share</paper-button> 
         <paper-button>Explore!</paper-button> 
        </div> 
       </paper-card> 

      </div> 


     </template> 
    </iron-list> 

Answer 1

あなたはiron-sort要素自体にnotifyResize()メソッドを実行します。しかし、あなたの走行距離は変更になる場合があります鉄のリストに適用されてきたものなスタイルのに応じて、

<iron-list items="[[data.data]]" as="item" scroll-target="document"> 
    ... 
</iron-list> 
document.querySelector('iron-list').notifyResize() 

Answer 2

は、私はちょうど私のアプリを開発して、同じ問題に出くわし、ここで私が思いついた解決策です。

Polymer 
({ 
    is: "tt-itinerary-list", 
    properties: 
    { 
    list: 
    { 
     type: Array, 
     value:[] 
    } 
    }, 
    init: function(data) 
    { 
    var instance = this; 
    instance.set("list", data); 

    instance.async(instance._monitorImageLoad, 200); 
    }, 
    _monitorImageLoad: function() 
    { 
    var instance = this; 

    var images = instance.querySelectorAll("paper-card .header img"); 

    for(var i = 0; i < images.length; ++i) 
    { 
     (function(image) 
     { 
     // if image is already loaded 
     if(image.complete) 
     { 
      instance._resizeList(); 
     } 
     // wait for the image to load 
     else 
     { 
      image.addEventListener 
      (
      "load", 
      instance._resizeList.bind(instance) 
     ) 
     } 
     })(images[i]); 
    } 
    }, 
    _resizeList: function() 
    { 
    var instance = this; 
    instance.$.list.fire("iron-resize"); 
    } 
}); 

基本的に何が起こるかは、私たちは、新たなデータを取得するたびに、我々はinit関数を呼び出すことです。次に、_monitorImageLoad関数を非同期に呼び出すと、paper-cardヘッダー内のすべてのイメージを繰り返し処理し、その読み込みプロセスを監視します。イメージが既にロードされている場合は、iron-resizeイベントを介してサイズ変更が必要なiron-listに通知します。それ以外の場合は、通知する前にロードを待機します。