Directory

← Back

iron-lazy-pages

Lazy-load content and lazy-register pages to reduce the first load time

Author

Rating

Popularity

<100

iron-lazy-pages

Published on webcomponents.org Build Status

<iron-pages> with lazy-loading functionality.

Lazy-loading pages

Big applications have a lot of pages. On first load, loading all page elements is undesirable. Most of the pages are unused for the current user. To solve these performance issues, lazy-loading provides an easy-to-use solution.

Lazy-loading means that all elements of your page are loaded when the user opens the respective page. E.g. when your user visits domain.com/about, all elements on the about page are fetched and loaded.

Example:

<iron-lazy-pages attr-for-selected="data-route" selected="{{route}}">
  <x-foo data-route="foo" data-path="demo/x-foo.html"></x-foo>
  <x-bar data-route="bar" data-path="demo/x-bar.html"></x-bar>
  <section data-route="baz">
    Inline element baz.
  </section>
</iron-lazy-pages>

In the above example, whenever the user routes to domain.com/foo, the elements defined in foo/foo.html are fetched from the server and loaded by Polymer.

Consequently whenever the selected value changes from foo to bar, the page foo will be hidden.

Fetching is only performed once, e.g. switching from foo to bar to foo will fetch foo once and show foo twice.

<dom-if> support

You can also add <dom-if> as a route to enable restamping:

<iron-lazy-pages
    attr-for-selected="data-route"
    selected="{{route}}"
    loading="{{loading}}"
    hide-immediately>
  <template is="dom-if" data-route="foo" restamp>
    Leaving this tab and coming back will loose input value due to restamp<br/>
    <input type="text"/>
  </template>
  <template is="dom-if" data-route="bar">
    Leaving this tab and coming back will keep input value<br/>
    <input type="text"/>
  </template>
</iron-lazy-pages>

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • @polymer/polymer#^3.0.0
  • @polymer/iron-selector#^3.0.0-pre.18
Released
2018-06-16
Maturity
IMPORTED
License
BSD 3-clause "New" or "Revised" License

Compatibility

Framework
Polymer 3.0+
Polymer 2.0+ in 2.1.1
Polymer 1.0+ in 1.5.1
Browser
Browser Independent

iron-lazy-pages - Vaadin Add-on Directory

Lazy-load content and lazy-register pages to reduce the first load time iron-lazy-pages - Vaadin Add-on Directory
# iron-lazy-pages [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/iron-lazy-pages) [![Build Status](https://travis-ci.org/TimvdLippe/iron-lazy-pages.svg?branch=master)](https://travis-ci.org/TimvdLippe/iron-lazy-pages) [``](https://github.com/PolymerElements/iron-pages) with lazy-loading functionality. ## Lazy-loading pages Big applications have a lot of pages. On first load, loading all page elements is undesirable. Most of the pages are unused for the current user. To solve these performance issues, lazy-loading provides an easy-to-use solution. Lazy-loading means that all elements of your page are loaded when the user opens the respective page. E.g. when your user visits `domain.com/about`, all elements on the about page are fetched and loaded. Example: ```html
Inline element baz.
``` In the above example, whenever the user routes to `domain.com/foo`, the elements defined in `foo/foo.html` are fetched from the server and loaded by Polymer. Consequently whenever the selected value changes from `foo` to `bar`, the page `foo` will be hidden. Fetching is only performed once, e.g. switching from `foo` to `bar` to `foo` will fetch `foo` once and show `foo` twice. ## `` support You can also add `` as a route to enable restamping: ```html ```
Online