Polymer 从网络加载图像后，铁名单与纸卡重叠

我正在使用聚合物

铁制列表

和纸质卡片，但问题是在改变设备方向之前，所有卡片都是重叠的。 在

纸卡的图像加载后，如何调用
铁艺列表的
notifyResize（）

 <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>


#[[index]]-[[item.category]]
[[项目.标题]]

分享
探索！

您将在
iron sort
元素本身上运行
notifyResize（）
方法

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


...
document.querySelector（'iron-list'）.notifyResize（）
您将在
iron sort
元素本身上运行
notifyResize（）
方法

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


...
document.querySelector（'iron-list'）.notifyResize（）
我刚刚在开发我的应用程序时遇到了同样的问题，下面是我提出的解决方案，但是，根据你将什么样式应用到铁名单上，你的里程可能会有所不同

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");
  }
});

聚合物
({
是：“tt行程表”，
特性：
{
名单：
{
类型：数组，
值：[]
}
},
init：函数（数据）
{
var实例=这个；
实例集（“列表”，数据）；
异步（instance.\u monitorImageLoad，200）；
},
_monitorImageLoad:函数（）
{
var实例=这个；
var images=instance.queryselectoral（“纸卡.表头img”）；
对于（变量i=0；i

基本上，当我们获得新数据时，我们调用
init
函数。然后我们异步调用
\u monitorImageLoad
函数，该函数迭代
纸卡
标题中的所有图像，然后监视它们的加载过程。如果图像已经加载，我们只需通知需要调整大小的
iron list
（通过
iron resize
事件），否则我们会等待它加载后再通知。
我刚刚在开发我的应用程序时遇到同样的问题，下面是我提出的解决方案，然而，根据你在铁名单上使用的风格，你的里程数可能会有所不同

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");
  }
});

聚合物
({
是：“tt行程表”，
特性：
{
名单：
{
类型：数组，
值：[]
}
},
init：函数（数据）
{
var实例=这个；
实例集（“列表”，数据）；
异步（instance.\u monitorImageLoad，200）；
},
_monitorImageLoad:函数（）
{
var实例=这个；
var images=instance.queryselectoral（“纸卡.表头img”）；
对于（变量i=0；i

基本上，当我们获得新数据时，我们调用

init

函数。然后我们异步调用

\u monitorImageLoad

函数，该函数迭代

纸卡

标题中的所有图像，然后监视它们的加载过程。如果图像已经加载，我们只需通知需要调整大小的

iron list

（通过

iron resize

事件），否则我们将等待加载后再通知