惰性加载巨大的json数据在聚合物



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

我正在使用聚合物和迭代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>
<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>

最新更新