在聚合物中延迟加载大量 json 数据

Question

我有一个 JSON 文件，其中包含大量数据，导致 HTML 页面在迭代时变得无响应。

我正在使用 Polymer 并迭代模板中的 JSON 数据。

有没有一种方法可以使用延迟加载进行迭代，这样我就不必同时加载所有数据？

下面是我的 HTML 元素文件。

<polymer-element name="flash-card">
  <template id="k">
    <style>
      flip-card {
        width: 200px;
        height: 200px;
      }
    </style>
    <core-ajax id='ajaxCard'
      url='../api/gre_questions.json'
      on-core-response="{{onResponse}}"
      handleAs='json'></core-ajax>

    <div horizontal layout wrap style="width: 100%">
      <template repeat="{{words in json}}">

        <flip-card axis="y" class="flip-card">

          <front style="background:#232343">
            <div style="overflow:hidden">{{words.word}}</div>
          </front>
          <back>
            <div style="overflow:hidden">
              {{words.meaning}}
            </div>
          </back>
        </flip-card>
      </template>
    </div>
  </template>
  <script>
    Polymer("flash-card",{
      json: null,
      ready: function () {
        this.$.ajaxCard.go();
      },
      onResponse: function (e, detail, sender) {
        this.json = detail.response;
      }
    });
  </script>
</polymer-element>

Answer 1

<core-ajax id='ajaxCard' url='../api/gre_questions.json' on-core-response="{{onResponse}}" handleAs='json' ></core-ajax>
<core-list data="{{json}}" style="width:100%; height: 100%">
  <template>
    <div >
      <button></button>
      <core-collapse>
        <div class="collapse-content">
          {{model.word}} : {{model.meaning}}
        </div>
      </core-collapse>
    </div>
  </template>
</core-list>

在聚合物中延迟加载大量 json 数据

Lazy loading huge json data in polymer

json

lazy-loading

polymer