uni-app在低内存设备上展示图片和动画出现闪屏问题，每隔一段时间图片就会消失并重新渲染

uni-app在低内存设备上展示图片和动画出现闪屏问题，每隔一段时间图片就会消失并重新渲染

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

示例代码：

<template>  
    <view>  
        <view v-for='(item,index) in picDatas' :key='item.id'>  
            <image :class='index == 0?"ani" : ""' :src='item.materialList[0].originUrl' :style='getStyle(item)'></image>  
        </view>  
    </view>  
</template>  

<script>  
    import {planData} from './data.js'  
    export default {  
        data() {  
            return {  
                picDatas: planData['1860849101461590017'].programList[0].pageList[0].itemList,  

            }  
        },  
        onLoad() {  
            console.log(this.picDatas)  
        },  
        methods: {  
            getStyle(item) {  
                return  {  
                    position: 'fixed',  
                    top: item.pixelY + 'px',  
                    left: item.pixelX + 'px',  
                    width: item.width + 'px',  
                    height: item.height + 'px',  
                    background: item.bgColor + 'px',  
                    transform: "rotate(" + (item.transform || 0) + "deg)",  
                    borderRadius: (item.borderRadius || 0) + 'px',  
                    overflow: 'hidden',  
                    zIndex: item.zIndex  
                }  
            }  
        }  
    }  
</script>  

<style>  
    @keyframes identifier {  
        0% {  
            transform: rotate(90deg);  
        }  

        100% {  
            transform: rotate(0deg);  
        }  
    }  

.ani {  
    animation-name: identifier;  
    animation-duration: 1s;  
    animation-iteration-count: infinite;  
}  
</style>

操作步骤：

新建.vue页面，将以上的代码放入到页面中，代码中引用的data.js在bug描述的附件中，运行在安卓9的设备中，安卓设备的运行内存为1GB。

预期结果：

不出现闪屏的问题。

实际结果：

出现了闪屏的问题，图片每隔一段时间就会消失，重新渲染。

bug描述：

在页面上渲染了40张图片，给其中一张图片加了css动画，每隔几分钟，页面上的图片就会消失，过一会又会重新渲染，设备运行内存1G，存储空间128G。


更多关于uni-app在低内存设备上展示图片和动画出现闪屏问题，每隔一段时间图片就会消失并重新渲染的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

首先可以确定不是图片过大的问题，把所有图片压缩成4、5兆也会闪

更多关于uni-app在低内存设备上展示图片和动画出现闪屏问题，每隔一段时间图片就会消失并重新渲染的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中处理低内存设备上的图片和动画闪屏问题，特别是图片消失并重新渲染的情况，可以通过优化图片加载和动画执行的方式来解决。以下是一些可能的解决方案，包括代码示例：

1. 使用图片懒加载

对于图片，可以采用懒加载技术，只有在图片即将进入视口时才进行加载，以减少内存占用。

<template>
  <view>
    <image v-if="imageLoaded" :src="imageUrl" @load="onLoad" style="width: 100%;"></image>
    <view v-else class="placeholder">Loading...</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg',
      imageLoaded: false
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.checkImageInViewport();
      window.addEventListener('scroll', this.checkImageInViewport);
    });
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.checkImageInViewport);
  },
  methods: {
    checkImageInViewport() {
      const rect = this.$el.querySelector('image').getBoundingClientRect();
      const inViewport = (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
      );
      if (inViewport && !this.imageLoaded) {
        this.imageLoaded = true;
      }
    },
    onLoad() {
      // Handle image load if necessary
    }
  }
};
</script>

2. 优化动画执行

对于动画，可以考虑使用CSS动画而非JavaScript动画，因为CSS动画通常由浏览器硬件加速执行，效率更高。同时，避免频繁创建和销毁动画元素。

<template>
  <view class="container">
    <image v-if="showImage" class="animated-image" :src="imageUrl"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/animated-image.gif',
      showImage: true
    };
  },
  mounted() {
    this.toggleImage();
  },
  methods: {
    toggleImage() {
      setInterval(() => {
        this.showImage = !this.showImage;
        // Give some time for the browser to render the image again
        this.$nextTick(() => {
          setTimeout(() => {
            this.showImage = !this.showImage;
          }, 100); // Adjust this timing based on your needs
        });
      }, 5000); // Adjust the interval as per your requirement
    }
  }
};
</script>

<style>
.animated-image {
  /* Add your animation styles here */
}
</style>

注意，上述代码中的toggleImage方法仅为示例，实际使用中应根据具体情况调整动画逻辑，避免频繁切换导致性能问题。对于低内存设备，考虑减少动画的复杂度和频率。

回到顶部