Tencent
img xhr 列表下的img的src在init的时候会把所有的图片都通过xhrget一遍，在图片列表较大的时候很影响
img xhr 列表下的img的src在init的时候会把所有的图片都通过xhr获取一遍，在图片列表较大的时候很影响性能
发现核心代码在于kbone\packages\miniprogram-render\src\node\element\image.js 文件下的 这段代码：
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)
}
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>
)
}
}
这段代码会被微信图片默认的 宽高给冲掉么？https://developers.weixin.qq.com/miniprogram/dev/component/image.html image组件默认宽度320px、高度240px
这段代码会被微信图片默认的 宽高给冲掉么？https://developers.weixin.qq.com/miniprogram/dev/component/image.html image组件默认宽度320px、高度240px
做过特殊兼容，所以按道理是不会的。
好像是wx.getImageInfo 会提前下载图片导致的，有什么解决办法吗?
看了下，只要设置 src 就会触发图片加载。如果你需要不在屏就不加载的话，可有先给 img src 设置为空，根据 intersectionObserver 再进行 src 设置？
这里 getImageInfo 主要是为了获取图片尺寸，和触发图片 load/error 事件。
你是需要做图片懒加载么 视口外的图片不加载可以使用kbone中的 window.$$createIntersectionObserver() 方法 链接如下： https://wechat-miniprogram.github.io/kbone/docs/domextend/#window-createintersectionobserver
