Lazy load images

[CrashLaker]

Hi all,

When I use this plugin to pop out images all images get loaded upon rendering.

Is it possible to lazy load them? What other options do you suggest?

[kluzny]

Here is what I'm doing:

  <popper trigger='clickToOpen'
          @show='isVisible = true'
          @hide='isVisible = false'
          ref='popper'
          :options="{
            placement: 'bottom',
          }">
    <div class='popper'>
      <grid-color-picker v-if='isVisible' @picked="picked"/>
    </div>
    <i slot='reference' class="fa fa-tint fa-lg" :style="coloredStyle" title="Click to select a color"></i>
  </popper>

So on the show event, I flag isVisible to true, then I use that to render my content. You may want to add a min-height to your image container to prevent it from jittering.

The advantage of this approach, is that there are no dom elements in all your popovers, until they become visible.

I'm using about 1000-5000 popovers using this approach, which seems to be the upper bound in terms of page performance.

Anymore than that and I'm going to have to do some dynamic list rendering or other magic.