Add support for lazy-loading pages

[vinerz]

trafficstars

It would be very nice to use a markup like this:

<iron-pages lazy>
  <page></page>
  <page></page>
  <page></page>
</iron-pages>

That under the hood wraps the <page>s into <template dom-if="{{_equals(selected, ....)}}">

This way we could be able to not load large chunks of DOM when not necessary instead of just using display: none, besides the great advantage of not loading nearly not used sections of the app into memory.

[TimvdLippe]

Our usecase could also benefit from this. We had an auto-triggering iron-ajax on our page which was still firing, even if that page was not loaded. If the pages are instead wrapped in the dom-if, we can listen for the attached event and correctly fire the request when needed.

[TimvdLippe]

FWIW I have built iron-lazy-pages: https://github.com/TimvdLippe/iron-lazy-pages

[vinerz]

Will check it out! Thanks 😃

[tpluscode]

Another way is to exclude load page elements lazily with this.importHref or lazy-imports

[stramel]

:+1: using lazy-imports

[TimvdLippe]

I have just pushed support for dom-if in iron-lazy-pages. The implementation is rather naive: just mimic the if property to the selected/deselected to trigger the dom-if restamping. Check it out at https://github.com/TimvdLippe/iron-lazy-pages/pull/56