uniapp动图加载慢处理

网页中用的动图太大，加载速度慢，页面留白时间长，内容位置会变动

1、图片预加载（优化下一步页面图片的加载速度）

预加载是在页面加载完毕后，提前加载下一步所需要的资源。在当前页面的onLoad中预加载下个页面需要展示的图片

onLoad() {
   let urls = ['图片1','图片2']
    urls.forEach(url => {
        uni.getImageInfo({
            src: url,
            success: res => {
                console.log(res)
            }
        })
    })
}

2、先展示静态图，后展示动图（优化当前页面图片的展示效果）

同时加载静态缩略图和动图，用户进来能快速展示静态缩略图，等动图加载完后隐藏静态图

<template>
    <view class="content" :style="{height:bgHeight}">
        <image class="png" :src="静态缩略图" mode="widthFix" v-if="isShow"></image>
        <image class="gif" :src="动图" mode="widthFix" @load="imageLoaded"></image>
        <view class="other">其他内容</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                bgHeight: '',
                isShow: true
            }
        },
        onShow() {
            // 获取图片高度，图片占位
            let info = uni.getSystemInfoSync();
            this.bgHeight = info.windowWidth*宽高比例 + 'px';
        },
        methods: {
            imageLoaded() {
                // 图片加载完后隐藏静态缩略图
                this.isShow = false
            }
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        position: relative;

        .gif {
            width: 100%;
        }

        .png {
            width: 100%;
        }
        
        // 设置高度后，图片加载完定位的内容不会发生位置变动
        .other{
            position: absolute;
            top: 63%;
            left: 50%;
        }
    }
</style>