title: Lazy loading huge json data in polymer
body: <p>I have a JSON file that contains a large amount of data that causes the HTML page to become unresponsive when iterating over it.</p>
  
  <p>I am using Polymer and iterating over the JSON data inside a template.</p>
  
  <p>Is there a way that I can do the iteration using lazy loading so that I do not have to load all the data at the same time?</p>
  
  <p>Below is my HTML file for the element.</p>
  
  <pre><code>&lt;polymer-element name="flash-card"&gt;
    &lt;template id="k"&gt;
      &lt;style&gt;
        flip-card {
          width: 200px;
          height: 200px;
        }
      &lt;/style&gt;
      &lt;core-ajax id='ajaxCard'
        url='../api/gre_questions.json'
        on-core-response="{{onResponse}}"
        handleAs='json'&gt;&lt;/core-ajax&gt;
  
      &lt;div horizontal layout wrap style="width: 100%"&gt;
        &lt;template repeat="{{words in json}}"&gt;
  
          &lt;flip-card axis="y" class="flip-card"&gt;
  
            &lt;front style="background:#232343"&gt;
              &lt;div style="overflow:hidden"&gt;{{words.word}}&lt;/div&gt;
            &lt;/front&gt;
            &lt;back&gt;
              &lt;div style="overflow:hidden"&gt;
                {{words.meaning}}
              &lt;/div&gt;
            &lt;/back&gt;
          &lt;/flip-card&gt;
        &lt;/template&gt;
      &lt;/div&gt;
    &lt;/template&gt;
    &lt;script&gt;
      Polymer("flash-card",{
        json: null,
        ready: function () {
          this.$.ajaxCard.go();
        },
        onResponse: function (e, detail, sender) {
          this.json = detail.response;
        }
      });
    &lt;/script&gt;
  &lt;/polymer-element&gt;
  </code></pre>