Lazy Loading A Div

This example lazily loads an expensive to calculate graph in a div within the page, allowing the page to respond immediately.

Note that the "server side" implementation is mocked out using mockjax, so you can see the entire implementation. Click the "Source Code" tab to see the code.

Explanation

  • A div within the page loads a graph from another URL using the ic-get-from attribute. In order to trigger the loading when the page loads, the ic-trigger-on attribute is set to "load".
  • A progress spinner is in the div when it is first rendered, to let the user know that the lazily loaded content is in flight

Demo

Tokyo Climate Graph



          <h3>Tokyo Climate Graph</h3>

          <div class="text-center" ic-get-from="/graph" ic-trigger-on="load">
            <i class="fa fa-spinner fa-spin fa-2x"></i> Loading Graph...
          </div>

          <style>
            div img {
              transition: all 1s;
            }
            div.ic-transitioning img {
               opacity: 0;
            }
          </style>

          <script>

            //========================================================================
            // Mock Server-Side HTTP End Point
            //========================================================================
            $.mockjax({
              url: "/graph",
              responseTime: 2500,
              response: function (settings) {
                this.responseText = "<img src='/images/tokyo.png'>"; // Hey, it's just a demo...
              }
            });

          </script>