iron-lazy-pages
Lazy-load content and lazy-register pages to reduce the first load time
iron-lazy-pages
<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>
Links
Compatibility
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/polymer#^1.0.0
- iron-selector#polymerelements/iron-selector#^1.0.0
- neon-animation#PolymerElements/neon-animation#^1.0.0
- Released
- 2017-03-31
- Maturity
- IMPORTED
- License
- Other
Compatibility
- Framework
- Polymer 1.0+
- Polymer 2.0+ in 2.0.0
- Polymer 3.0+ in 3.0.0
- Browser
- Browser Independent
iron-lazy-pages - Vaadin Add-on Directory
Lazy-load content and lazy-register pages to reduce the first load time
Leaving this tab and coming back will keep input value
Online Demo
Documentation
GitHub Homepage
View on NPM
Issue tracker
License
iron-lazy-pages version 0.1.0
### Dependencies
* polymer#Polymer/polymer#^1.0.0
* iron-selector#polymerelements/iron-selector#^1.0.0
iron-lazy-pages version 1.0.0
### Dependencies
* polymer#Polymer/polymer#^1.0.0
* iron-selector#polymerelements/iron-selector#^1.0.0
iron-lazy-pages version 1.0.1
### Dependencies
* polymer#Polymer/polymer#^1.0.0
* iron-selector#polymerelements/iron-selector#^1.0.0
iron-lazy-pages version 1.0.2
### Dependencies
* polymer#Polymer/polymer#^1.0.0
* iron-selector#polymerelements/iron-selector#^1.0.0
iron-lazy-pages version 1.1.0
### Dependencies
* polymer#Polymer/polymer#^1.0.0
* iron-selector#polymerelements/iron-selector#^1.0.0
iron-lazy-pages version 1.1.1
### Dependencies
* polymer#Polymer/polymer#^1.0.0
* iron-selector#polymerelements/iron-selector#^1.0.0
iron-lazy-pages version 1.2.0
### Dependencies
* polymer#Polymer/polymer#^1.0.0
* iron-selector#polymerelements/iron-selector#^1.0.0
iron-lazy-pages version 1.2.1
### Dependencies
* polymer#Polymer/polymer#^1.0.0
* iron-selector#polymerelements/iron-selector#^1.0.0
iron-lazy-pages version 1.3.0
### Dependencies
* polymer#Polymer/polymer#^1.0.0
* iron-selector#polymerelements/iron-selector#^1.0.0
iron-lazy-pages version 1.4.0
### Dependencies
* polymer#Polymer/polymer#^1.0.0
* iron-selector#polymerelements/iron-selector#^1.0.0
* neon-animation#PolymerElements/neon-animation#^1.0.0
iron-lazy-pages version 1.4.1
### Dependencies
* polymer#Polymer/polymer#^1.0.0
* iron-selector#polymerelements/iron-selector#^1.0.0
* neon-animation#PolymerElements/neon-animation#^1.0.0
iron-lazy-pages version 1.4.2
### Dependencies
* polymer#Polymer/polymer#^1.0.0
* iron-selector#polymerelements/iron-selector#^1.0.0
* neon-animation#PolymerElements/neon-animation#^1.0.0
iron-lazy-pages version 1.4.3
### Dependencies
* polymer#Polymer/polymer#^1.0.0
* iron-selector#polymerelements/iron-selector#^1.0.0
* neon-animation#PolymerElements/neon-animation#^1.0.0
iron-lazy-pages version 1.4.4
### Dependencies
* polymer#Polymer/polymer#^1.0.0
* iron-selector#polymerelements/iron-selector#^1.0.0
* neon-animation#PolymerElements/neon-animation#^1.0.0
iron-lazy-pages version 1.5.0
### Dependencies
* polymer#Polymer/polymer#^1.0.0
* iron-selector#polymerelements/iron-selector#^1.0.0
* neon-animation#PolymerElements/neon-animation#^1.0.0
iron-lazy-pages version 1.5.1
### Dependencies
* polymer#Polymer/polymer#^1.0.0
* iron-selector#polymerelements/iron-selector#^1.0.0
* neon-animation#PolymerElements/neon-animation#^1.0.0
iron-lazy-pages version 2.0.0
### Dependencies
* polymer#Polymer/polymer#^2.0.0
* iron-selector#PolymerElements/iron-selector#^2.0.0
iron-lazy-pages version 2.0.1
### Dependencies
* polymer#Polymer/polymer#^2.0.0
* iron-selector#PolymerElements/iron-selector#^2.0.0
iron-lazy-pages version 2.0.2
### Dependencies
* polymer#Polymer/polymer#^2.0.0
* iron-selector#PolymerElements/iron-selector#^2.0.0
iron-lazy-pages version 2.1.0
### Dependencies
* polymer#Polymer/polymer#^2.0.0
* iron-selector#PolymerElements/iron-selector#^2.0.0
iron-lazy-pages version 2.1.1
### Dependencies
* polymer#Polymer/polymer#^2.0.0
* iron-selector#PolymerElements/iron-selector#^2.0.0
iron-lazy-pages version 3.0.0
### Dependencies
* @polymer/polymer#^3.0.0
* @polymer/iron-selector#^3.0.0-pre.18
iron-lazy-pages version 3.0.1
### Dependencies
* @polymer/polymer#^3.0.0
* @polymer/iron-selector#^3.0.0-pre.18
iron-lazy-pages version 3.0.2
### Dependencies
* @polymer/polymer#^3.0.0
* @polymer/iron-selector#^3.0.0-pre.18