How To Delete Image From Array If Display="none" Using Vue.js?

I am using Vue.js in my project. I have a background of images which are animated, they are moving from up to down. Everything connected to the random image, position and etc is i

Solution 1:

You want each image to persist for five seconds (based on your animation-duration), and you're adding one image every 250ms (based on your changeInterval variable). This means that your image array needs to contain a maximum of twenty images, rather than the 500 you're currently limiting it to.

You could control this by modifying your addImage function to drop the oldest image before adding the newest one. (You're already doing this, except that you're waiting until five hundred of them have built up and then splicing off three hundred at once; better to do it one at a time:)

addImage() {
  if (this.addedImage.length > 20) {
    this.addedImage.shift() // remove oldest image (the first one in the array)
  }
  // add a new image to the end of the array:this.addedImage.push({
    style: {
      top: `${this.imgTop}px`,
      left: `${this.imgLeft}px`,
      height: `${this.imgHeight}px`,
      width: `${this.imgWidth}px`
    },
    src: this.selectedImage
  });
}

There's no need to read the display value from the DOM, you can just depend on the timing to ensure that the images aren't removed before they're supposed to; modifying the array is all that's necessary to remove the elements from the DOM. (You could harmlessly leave a few extra in the array length, just in case, but there's no need to go all the way to 500.) mounted() wouldn't be useful for this case because that function only runs once, when the component is first drawn onto the page, before there's anything in the addedImages array.

Solution 2:

Using v-if to remove images which style is display: none. And i think you can delete all code in mounted().

<div class="randImg">
  <templatev-for="image in addedImage"><imgv-if="image.style.display !== 'none'"class="image":style="image.style":src="image.src"></template></div>