I used hidden$="{{show}}" instead which significantly improved the
experience. Sorry about the fundamental question, I was just dreading side
effects of the code change. On one template there were none, but on another
the layout got messed up. But that's ok...the main template that was taking
the longest works great with hidden.
Thanks,
-Darin
On Sunday, January 3, 2016 at 2:03:38 AM UTC-6, Rob Dodson wrote:
>
> Would it be possible to have them in the page but just hidden? IOW, not
> using dom-if at all?
>
> On Sat, Jan 2, 2016 at 9:28 PM, Darin Hensley <[email protected]
> <javascript:>> wrote:
>
>> 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] <javascript:>.
>> To view this discussion on the web visit
>> https://groups.google.com/d/msgid/polymer-dev/0cb166f7-ed3e-4524-9b65-31968262bff3%40googlegroups.com
>>
>> <https://groups.google.com/d/msgid/polymer-dev/0cb166f7-ed3e-4524-9b65-31968262bff3%40googlegroups.com?utm_medium=email&utm_source=footer>
>> .
>> For more options, visit https://groups.google.com/d/optout.
>>
>
>
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/c5501596-a97d-401f-969c-000621f7936c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
