I have a template with 9 custom elements(cards). When the user first clicks
on menu item to show the template, there is a
significant-enough-performance hit that I notice in the page slide
animation. Is there away to stamp these templates ahead of time? I know the
rule of thumb is to stamp them at the time the user chooses to use them,
but I would rather have these stamped(but not shown of course) during the
splash screen.
<dom-module id="portfolio-display">
<style>
:host[show] {
background-color: var(--paper-grey-50);
}
#main {
width: 100%;
margin-top: 50px;
}
.spacer {
width: 8px;
}
</style>
<template>
<template is="dom-if" if="{{show}}">
<iron-media-query query="(min-width: 1700px)"
query-matches="{{largeSizeScreen}}"></iron-media-query>
<iron-media-query query="(min-width: 700px) and (max-width: 1699px)"
query-matches="{{midSizeScreen}}"></iron-media-query>
<iron-media-query query="(max-width: 699px)"
query-matches="{{smallSizeScreen}}"></iron-media-query>
<div id="main">
<div class="layout vertical center center"
hidden$="{{!largeSizeScreen}}">
<div class="layout horizontal">
<other-card></other-card>
<div class="spacer"></div>
<cloud-share-image-card></cloud-share-image-card>
<div class="spacer"></div>
<cloud-monitor-card></cloud-monitor-card>
</div>
<div class="layout horizontal">
<legacy-other-card></legacy-other-card>
<div class="spacer"></div>
<dad-site-card></dad-site-card>
<div class="spacer"></div>
<krunch-uploader-card></krunch-uploader-card>
</div>
<div class="layout horizontal">
<gulp-newy-card></gulp-newy-card>
</div>
</div>
<div class="layout vertical center center"
hidden$="{{!midSizeScreen}}">
<div class="layout horizontal">
<other-card></other-card>
<div class="spacer"></div>
<cloud-share-image-card></cloud-share-image-card>
</div>
<div class="layout horizontal">
<cloud-monitor-card></cloud-monitor-card>
<div class="spacer"></div>
<legacy-other-card></legacy-other-card>
</div>
<div class="layout horizontal">
<dad-site-card></dad-site-card>
<div class="spacer"></div>
<krunch-uploader-card></krunch-uploader-card>
</div>
<div class="layout horizontal">
<gulp-newy-card></gulp-newy-card>
</div>
</div>
<div class="layout vertical center center"
hidden$="{{!smallSizeScreen}}">
<other-card></other-card>
<cloud-share-image-card></cloud-share-image-card>
<cloud-monitor-card></cloud-monitor-card>
<legacy-other-card></legacy-other-card>
<dad-site-card></dad-site-card>
<krunch-uploader-card></krunch-uploader-card>
<gulp-newy-card></gulp-newy-card>
</div>
</div>
</template>
</template>
<script>
Polymer({
is: "portfolio-display",
properties: {
show: {
type: Boolean,
value: false
}
}
});
</script>
</dom-module>
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/0cb166f7-ed3e-4524-9b65-31968262bff3%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
