img xhr 列表下的img的src在init的时候会把所有的图片都通过xhrget一遍，在图片列表较大的时候很影响

[shaohao123]

img xhr 列表下的img的src在init的时候会把所有的图片都通过xhr获取一遍，在图片列表较大的时候很影响性能

发现核心代码在于kbone\packages\miniprogram-render\src\node\element\image.js 文件下的 这段代码：

[JimmyVV]

已经收到哦~~~~

[shaohao123]

set src(value) {
    if (!value || typeof value !== 'string') return

    this.$_attrs.set('src', value)

    setTimeout(() => {
        wx.getImageInfo({
            src: this.src,
            success: res => {
                // 加载成功，调整图片的宽高
                this.$_resetRect(res)

                // 触发 load 事件
                this.$$trigger('load', {
                    event: new Event({
                        name: 'load',
                        target: this,
                        eventPhase: Event.AT_TARGET
                    }),
                    currentTarget: this,
                })
            },
            fail: () => {
                // 加载失败，调整图片的宽高
                this.$_resetRect({width: 0, height: 0})

                // 触发 error 事件
                this.$$trigger('error', {
                    event: new Event({
                        name: 'error',
                        target: this,
                        eventPhase: Event.AT_TARGET
                    }),
                    currentTarget: this,
                })
            },
        })
    }, 0)
}

[shaohao123]

demo如下：

[shaohao123]

export default class OrderMeal extends Component {

data1 = [
    {
        "src": "https://ykj-open-api-test.yonyoucloud.com/iuap-apcom-file-public/iuap-apcom-file/0000LF93VS7M2AAA6D0000/2023112114/df31c411-822e-45d1-b30d-0ed4bdb57419.jpg.thumb.jpg",
    }, {
        "src": "https://ykj-open-api-test.yonyoucloud.com/iuap-apcom-file-public/iuap-apcom-file/0000LF93VS7M2AAA6D0000/2023112115/df9ed257-3a0c-49dc-a279-ca1b4b2392fc.png.thumb.jpg",
    }, {
        "src": "https://ykj-open-api-test.yonyoucloud.com/iuap-apcom-file-public/iuap-apcom-file/0000LF93VS7M2AAA6D0000/2023112111/5925ecf3-968e-4890-8260-68b0b9a00750.jpg.thumb.jpg",
    }, {
        "src": "https://ykj-open-api-test.yonyoucloud.com/iuap-apcom-file-obs/iuap-apcom-file/0000LF93VS7M2AAA6D0000/2023071315/e3167bcb-8692-4a1d-812f-bafc207cec6b.png.thumb.jpg",
    }, {
        "src": "https://ykj-open-api-test.yonyoucloud.com/iuap-apcom-file-obs/iuap-apcom-file/0000LF93VS7M2AAA6D0000/2023052217/457a522f-0e67-4fa3-9ce5-8b81af9f9902.jpeg.thumb.jpg",
    }, {
        "src": "https://ykj-open-api-test.yonyoucloud.com/iuap-apcom-file-obs/iuap-apcom-file/0000LF93VS7M2AAA6D0000/2023071315/6a324087-f683-4e3f-ae8c-22c9389387ee.png.thumb.jpg",
    }, {
        "src": "https://ykj-open-api-test.yonyoucloud.com/iuap-apcom-file-public/iuap-apcom-file/0000LF93VS7M2AAA6D0000/2023112114/9df50fc2-5288-435e-8e62-d1b290761fdb.jpg.thumb.jpg",
    }, {
        "src": "https://ykj-open-api-test.yonyoucloud.com/iuap-apcom-file-public/iuap-apcom-file/0000LF93VS7M2AAA6D0000/2023112114/cc1eec4a-774b-4df5-b8da-67c78672d7e2.jpeg.thumb.jpg",
    }
]




render() {
    return (
        <scroll-view scroll-y={true}>
            {
                this.data1.map((el, elindex) => {
                    return <image style={{height:'500px'}} src={el.src} className="image" lazy-load mode='scaleToFill'></image>
                })
            }
        </scroll-view>
    )
}

}

[shaohao123]

好像是wx.getImageInfo 会提前下载图片导致的，有什么解决办法吗?

[shaohao123]

这段代码会被微信图片默认的 宽高给冲掉么？https://developers.weixin.qq.com/miniprogram/dev/component/image.html
image组件默认宽度320px、高度240px

[JuneAndGreen]

这段代码会被微信图片默认的 宽高给冲掉么？https://developers.weixin.qq.com/miniprogram/dev/component/image.html image组件默认宽度320px、高度240px

做过特殊兼容，所以按道理是不会的。

[JuneAndGreen]

好像是wx.getImageInfo 会提前下载图片导致的，有什么解决办法吗?

看了下，只要设置 src 就会触发图片加载。如果你需要不在屏就不加载的话，可有先给 img src 设置为空，根据 intersectionObserver 再进行 src 设置？

这里 getImageInfo 主要是为了获取图片尺寸，和触发图片 load/error 事件。

[1026203093]

你是需要做图片懒加载么 视口外的图片不加载可以使用kbone中的 window.$$createIntersectionObserver() 方法
链接如下：
https://wechat-miniprogram.github.io/kbone/docs/domextend/#window-createintersectionobserver

[JimmyVV]

已经收到哦~~~~