從網絡加載圖像後鐵牌重疊紙牌

我正在使用聚合物iron-list與紙卡，但問題是所有牌都重疊，直到改變設備的方向。 paper-card圖片加載完成後請如何撥打notifyResize()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>

來源

2016-10-01 user2837615

將運行iron-sort元素本身的notifyResize()方法。

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

來源

2016-10-01 19:59:34 abraham

我只是碰到了同樣的問題，發展我的應用程序跌跌撞撞，這裏是我想出了一個解決方案，但是這取決於你應用到鐵列表您的里程可能會有所不同是什麼風格的。

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-list需要調整大小（通過iron-resize事件），否則我們會在通知之前等待加載。

來源

2017-03-26 19:34:09

從網絡加載圖像後鐵牌重疊紙牌

回答

相關問題