наклейки с накладными листами после загрузки изображения из сети

Question

Я использую полимер iron-list с бумажной картой, но проблема в том, что все карты перекрываются, пока не измените ориентацию устройства. Как позвонить notifyResize() из iron-list после загрузки изображения paper-card.

<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

Вы запустите notifyResize() метод на самом iron-sort элемента.

<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-list, что необходимо изменить размер (через событие iron-resize), иначе мы дождаемся его загрузки перед уведомлением.