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
- 2016-09-14
- 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 timeLeaving 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