Comments (10)
from kbone.
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)
}
from kbone.
demo如下:
from kbone.
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>
)
}
}
from kbone.
好像是wx.getImageInfo 会提前下载图片导致的,有什么解决办法吗?
from kbone.
这段代码会被微信图片默认的 宽高给冲掉么?https://developers.weixin.qq.com/miniprogram/dev/component/image.html
image组件默认宽度320px、高度240px
from kbone.
这段代码会被微信图片默认的 宽高给冲掉么?https://developers.weixin.qq.com/miniprogram/dev/component/image.html image组件默认宽度320px、高度240px
做过特殊兼容,所以按道理是不会的。
from kbone.
好像是wx.getImageInfo 会提前下载图片导致的,有什么解决办法吗?
看了下,只要设置 src 就会触发图片加载。如果你需要不在屏就不加载的话,可有先给 img src 设置为空,根据 intersectionObserver 再进行 src 设置?
这里 getImageInfo 主要是为了获取图片尺寸,和触发图片 load/error 事件。
from kbone.
你是需要做图片懒加载么 视口外的图片不加载可以使用kbone中的 window.$$createIntersectionObserver() 方法
链接如下:
https://wechat-miniprogram.github.io/kbone/docs/domextend/#window-createintersectionobserver
from kbone.
from kbone.
Related Issues (20)
- ios真机调试报错 selector = selector.replace(regexp, onProcess) HOT 1
- npm run build,h5空白 HOT 1
- vue-cli-plugin-kbone 是不是不支持webpack5项目 HOT 2
- kbone页面节点1000左右的时候,小程序就会变卡顿吗,即使没有在setData,滑动都感觉不流畅 HOT 11
- wx-input 组件 触发input 事件的时候,没监听事件返回值,以及不会同步外部value的值。 HOT 2
- 【讨论】新的小程序组件框架 glass-easel HOT 1
- wx-button open-type="agreePrivacyAuthorization" 回调无法触发 HOT 4
- -
- 是否可以支持 Construct 3 引擎? HOT 3
- createIntersectionObserver().relativeToViewport().observe() 问题 HOT 9
- npm install的时候报错,依赖冲突了 HOT 1
- 'rimraf' 不是内部或外部命令,也不是可运行的程序 HOT 1
- kbone递归方案 HOT 1
- 使用window.$$createIntersectionObserver()页面报错异常错误
- 组件属性对齐:input 组件 auto-focus 即将弃用,需要使用 focus 替代 HOT 1
- 请问在vue3项目中使用kbone-ui的mp-navigation-bar组件时,如何绑定bindback事件? HOT 3
- 小程序内嵌视频号视频,无法加载到wx-channel-video组件 HOT 11
- 瓦片地图【image】标签在图片较大时(100k左右)在真机环境不显示 HOT 1
- 请求 Blazor WebAssmebly 支持 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from kbone.