【小程序】使用uni-app搭建小程序環境---圖片懶加載

屬性：

屬性名	類型	默認值	說明	平台差異說明
src	String		圖片資源地址
mode	String	'scaleToFill'	圖片裁剪、縮放的模式
lazy-load	Boolean	false	圖片懶加載。只針對page與scroll-view下的image有效	微信小程序、5+APP、百度小程序、頭條小程序
@error	HandleEvent		當錯誤發生時，發布到 AppService 的事件名，事件對象event.detail = {errMsg: 'something wrong'}
@load	HandleEvent		當圖片載入完畢時，發布到 AppService 的事件名，事件對象event.detail = {height:'圖片高度px', width:'圖片寬度px'}

注意事項

• <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" style="padding:30upx 0;">
                延遲加載的理念：頁面初始化時，暫不加載處於屏幕可見區域之外的圖片。該方案會有如下幾大好處：
                <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介紹
• 自定義懶加載效果