Showing elements when onscreen

[Jesus82]

I have a long list of elements created with v-for, and each one has a photo. I would like to just show the photo when onscreen.

Is there any way to tell directly to v-show that the element is onscreen?

So far the only way I could make it work is by adding each id in the screen to an array, and then check with the v-show if the id of the element is in the array.

<img src="my/image/source.jpg"
  v-show="visibleItems.includes(myElement.id)"
  v-observe-visibility="(isVisible, entry) => visibilityChanged(isVisible, entry, myElement.id)">

export default {
data: function() {
  return {
    visibleItems: []
    }
},
methods: {
  visibilityChanged (isVisible, entry, itemID) {
     if (isVisible && !this.visibleItems.includes(itemID)) {
       this.visibleItems.push(itemID)
     } else if (!isVisible && this.visibleItems.includes(itemID)) {
       this.visibleItems.pop(itemID)
     }
   }
}
}

While it works, it is not very responsive (it lags a bit to update the visibleItems array), which makes it non usable. So if somebody has a better method, it would be very helpful. Thanks!

[Akryum]

Create a child component with the image and a visible data property.

[Jesus82]

Let me know if I understand this correctly: that would mean creating a method that would inject html, and passing a prop in order to set the image src, isn't it?

[Elaniobro]

@Akryum & @Jesus82 I opened issue #173, which may be a duplicate of this one.

I am trying to do the same thing, and I would like to pass the :visible="isVisible" as a prop on a component within the v-for. Further more I may want to pass it on down to a few children.

This way, I only have one observer, on the list element, that will pass the isVisible boolean down to all the components that reside within the <li> element. I am doing this namely to fire off ajax calls.

Here is how I currently have it setup and working with out passing a prop:

Parent component v-for list generator with No props

<ul v-else class="provider-list__list list__wrapper">
  <li
    v-for="(provider, id) in getTrending"
    :key="id"
  >
    <Avatar />
  </li>
</ul>

Current way without ability to pass a prop

<template>
  <div
    class="avatar__wrapper"
    v-observe-visibility="{
      callback: (isVisible, entry) => visibilityChanged(isVisible, entry),
      throttle: 300,
      once: true,
      rootMargin: -200
    }"
  >
    <img
      v-if="visible"
      :id="$store.state.trendingData.providers[itemId].networkId"
      :src="this.getPhotoSrc(networkId)"
      :alt="$store.state.trendingData.providers[itemId].networkId"
      class="avatar__img"
    />
    <img v-else src="~assets/images/profilepicture.jpg" class="avatar__img" />
  </div>
</template>
<script>
export default {
  name: 'Avatar',
  props: {
    itemId: {
      required: true,
      type: Number
    },
    networkId: {
      required: true,
      type: String
    }
  },

  data() {
    return {
      visible: false
    }
  },

  methods: {
    getPhotoSrc(networkId) {
      return `${process.env.dev.apiUrl}/api/avatar?networkId=${networkId}`
    },
    visibilityChanged(isVisible, entry) {
      this.visible = isVisible
    }
  }
}
</script>

Here is how I would ❤️ for it to work with ability to pass a prop

Parent component v-for list generator passing `isVisible as a prop set up

<ul v-else class="provider-list__list list__wrapper">
  <li
    v-for="(provider, id) in getTrending"
    :key="id"
  >
    <Avatar :visible="isVisible" />
  </li>
</ul>

Child component Avatar accepting the visible data prop

<template>
  <div class="avatar__wrapper">
    <img
      v-if="visible"
      :src="this.getPhotoSrc(networkId)"
      class="avatar__img"
    />
    <img v-else src="~assets/images/profilepicture.jpg" class="avatar__img" />
  </div>
</template>
<script>
export default {
  name: 'Avatar',
  props: {
    visible: {
      required: true,
      type: Boolean
    },
    itemId: {
      required: true,
      type: Number
    },
    networkId: {
      required: true,
      type: String
    }
  },

  methods: {
    getPhotoSrc(networkId) {
      return `${process.env.dev.apiUrl}/api/avatar?networkId=${networkId}`
    }
  }
}
</script>