【小程序】使用uni-app搭建小程序环境---图片懒加载 - smile轉角

【小程序】使用uni-app搭建小程序环境---图片懒加载

属性：

注意事项

• <image> 组件默认宽度 300px、高度 225px；app-nvue平台，暂时默认为屏幕宽度
• src 仅支持相对路径、绝对路径，支持 base64 码；
• 页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置 image{will-change: transform} ,可优化此问题。
• 自定义组件里面使用 <image>时，若 src 使用相对路径可能出现路径查找失败的情况，故建议使用绝对路径。
• webp格式的图片，app-vue下，iOS不支持，Android支持；app-nvue下，iOS和Android均支持。app-vue下也支持gif。

应用

<image lazy-load :src="item.img ? item.img : defaultImg.course"  />

自定义懒加载

<template>
    <view>
        <view class="uni-padding-wrap">
            <view class="uni-helllo-text" >
                延迟加载的理念：页面初始化时，暂不加载处于屏幕可见区域之外的图片。该方案会有如下几大好处：
                <text>\n加快页面渲染速度</text>
                <text>\n提升页面滚动性能</text>
                <text>\n默认不下载屏幕外的图片，减少网络流量</text>
            </view>
        </view>
        <view class="uni-list">
            <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in list" :key="index">
                <view class="uni-media-list">
                    <view class="uni-media-list-logo">
                        <image class="image" :class="{lazy:!item.show}" :data-index="index" @load="imageLoad" :src="item.show?item.src:\'\'" />
                        <image class="image placeholder" :class="{loaded:item.loaded}" :src="placeholderSrc" />
                    </view>
                    <view class="uni-media-list-body">
                        <view class="uni-media-list-text-top">主标题</view>
                        <view class="uni-media-list-text-bottom uni-ellipsis">列表二级标题</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            var imgs = [\'shuijiao\', \'muwu\', \'cbd\']
            var list = []

            for (let i = 0; i < 20; i++) {
                list.push({
                    src: `https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/${imgs[i%3]}.jpg`,
                    show: false,
                    loaded: false
                })
            }

            return {
                windowHeight: 0,
                placeholderSrc: \'/static/kechengfengmianmorentu.png\',
                list: list,
                show: false
            }
        },
        methods: {
            load() {
                uni.createSelectorQuery().selectAll(\'.lazy\').boundingClientRect((images) => {
                    images.forEach((image, index) => {
                        if (image.top <= this.windowHeight) {
                            this.list[image.dataset.index].show = true;
                        }
                    })
                }).exec()
            },
            imageLoad(e) {
                this.list[e.target.dataset.index].loaded = true
            }
        },
        onLoad() {
            this.windowHeight = uni.getSystemInfoSync().windowHeight
        },
        onShow() {
            if (!this.show) {
                this.show = true
                setTimeout(() => {
                    this.load()
                }, 100)
            }
        },
        onPageScroll() {
            this.load()
        }
    }
</script>

<style>
    .placeholder {
        opacity: 1;
        transition: opacity 0.4s linear;
    }

    .placeholder.loaded {
        opacity: 0;
    }

    .uni-media-list-logo {
        position: relative;
    }

    .uni-media-list-logo .image {
        position: absolute;
    }
</style>

相关资料

• 官网image介绍
• 自定义懒加载效果