如果 display="none"，如何从数组中删除图像使用 Vue.js? [英] How to delete image from array if display="none" using Vue.js?
问题描述
我在我的项目中使用 Vue.js.我有一个动画图像的背景，它们从上到下移动.与随机图像、位置等相关的所有内容都在 created() 中:
const vue = require("@/assets/images/vue.png");const bootstrap = require("@/assets/images/bootstrap.png");const bulma = require("@/assets/images/bulma.png");导出默认{name: "randImg",数据() {返回 {图片: [视图，引导程序，布尔玛],添加图片:[],imgTop:-100，左图:-100，图像高度:64，图像宽度:64，变化间隔:250}},创建(){const randomImg = func =>setInterval(func, this.changeInterval);randomImg(this.randomImage);randomImg(this.addImage);randomImg(this.randomPosition);},挂载:函数(){如果 (this. addedImage[i] = {样式:{显示:`无`}}) {this. addedImage.remove(this. addedImage[i]);}},方法: {随机图像(){const idx = Math.floor(Math.random() * this.images.length);this.selectedImage = this.images[idx];},随机位置(){const randomPos = twoSizes =>Math.round(Math.random() * twoSizes);this.imgTop = randomPos(screen.height/10 - this.imgHeight);this.imgLeft = randomPos(screen.width - this.imgWidth);},添加图片() {如果 (this. addedImage.length > 500) {this. addedImage.splice(0, 300);} 别的 {this. addedImage.push({风格: {顶部:`${this.imgTop}px`，左:`${this.imgLeft}px`，高度:`${this.imgHeight}px`，宽度:`${this.imgWidth}px`},src: this.selectedImage});}}}}css
.image {位置:固定；z-索引:-1；不透明度:0；动画名称:animationDrop；动画持续时间:5s；动画计时功能:线性；动画迭代计数:1；过滤器:模糊(3px)；意志改变:转变；}@keyframes animationDrop {15%{不透明度:0.2；}50%{不透明度:0.4；}80%{不透明度:0.3；}100% {顶部:100%；显示:无；}}和 html
<img class="image" :style="image.style":src="image.src"v-for="已添加图像中的图像">我的网站滞后，因为图像无限地添加到 DOM.我的动画的想法是，当我的图像在 100% 关键帧上时，它不会显示任何内容.所以我决定在 mounted() 中简单地创建一个 if 语句，但它不起作用；我收到错误消息ReferenceError: i is not defined".
当图片没有显示时如何删除图片?
您希望每个图像持续五秒钟(基于您的动画持续时间)，并且您每 250 毫秒添加一个图像(基于您的 changeInterval 变量).这意味着您的图像数组最多需要包含 20 个图像，而不是您当前限制为 500 个的图像.
您可以通过修改 addImage 函数在添加最新图像之前删除最旧的图像来控制这一点.(你已经在这样做了，只是你要等到五百个建立起来，然后一次拼接三百个；最好一次做一个:)
addImage() {如果 (this. addedImage.length > 20) {this. addedImage.shift()//移除最旧的图像(数组中的第一个)}//在数组末尾添加一个新图像:this. addedImage.push({风格: {顶部:`${this.imgTop}px`，左:`${this.imgLeft}px`，高度:`${this.imgHeight}px`，宽度:`${this.imgWidth}px`},src: this.selectedImage});}不需要从 DOM 中读取显示值，您可以只依靠时间来确保图像不会在它们应该被移除之前被移除；修改数组是从 DOM 中删除元素所需的全部内容.(为了以防万一，您可以在数组长度中无害地留下一些额外的东西，但没有必要一直到 500.) mounted() 在这种情况下没有用，因为那函数只运行一次，当组件第一次被绘制到页面上时，在 addedImages 数组中有任何东西之前.
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 inside created():
const vue = require("@/assets/images/vue.png");
const bootstrap = require("@/assets/images/bootstrap.png");
const bulma = require("@/assets/images/bulma.png");
export default {
name: "randImg",
data() {
return {
images: [
vue,
bootstrap,
bulma
],
addedImage: [],
imgTop: -100,
imgLeft: -100,
imgHeight: 64,
imgWidth: 64,
changeInterval: 250
}
},
created() {
const randomImg = func => setInterval(func, this.changeInterval);
randomImg(this.randomImage);
randomImg(this.addImage);
randomImg(this.randomPosition);
},
mounted: function () {
if (this.addedImage[i] = {
style: {display: `none`}
}) {
this.addedImage.remove(this.addedImage[i]);
}
},
methods: {
randomImage() {
const idx = Math.floor(Math.random() * this.images.length);
this.selectedImage = this.images[idx];
},
randomPosition() {
const randomPos = twoSizes => Math.round(Math.random() * twoSizes);
this.imgTop = randomPos(screen.height / 10 - this.imgHeight);
this.imgLeft = randomPos(screen.width - this.imgWidth);
},
addImage() {
if (this.addedImage.length > 500) {
this.addedImage.splice(0, 300);
} else {
this.addedImage.push({
style: {
top: `${this.imgTop}px`,
left: `${this.imgLeft}px`,
height: `${this.imgHeight}px`,
width: `${this.imgWidth}px`
},
src: this.selectedImage
});
}
}
}
}
css
.image {
position: fixed;
z-index: -1;
opacity: 0;
animation-name: animationDrop;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: 1;
filter: blur(3px);
will-change: transform;
}
@keyframes animationDrop {
15% {
opacity: 0.2;
}
50% {
opacity: 0.4;
}
80% {
opacity: 0.3;
}
100% {
top: 100%;
display: none;
}
}
and html
<div class="randImg">
<img class="image" :style="image.style"
:src="image.src"
v-for="image in addedImage">
</div>
My site is lagging because images are adding to the DOM infinitely. The idea of my animation is that when my image is on keyframe 100% it will have display none. So I decide to simply create an if statement inside mounted() but it doesn't work; I get the error message "ReferenceError: i is not defined".
How can I delete the images when their display become none?
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.
这篇关于如果 display="none"，如何从数组中删除图像使用 Vue.js?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
