Skip to content

feat: add load-image component#7

Merged
RobinYang11 merged 2 commits intoRobinYang11:devfrom
mfts2048:dev
Mar 22, 2023
Merged

feat: add load-image component#7
RobinYang11 merged 2 commits intoRobinYang11:devfrom
mfts2048:dev

Conversation

@mfts2048
Copy link
Copy Markdown

添加 懒加载 模块组件

添加 懒加载 模块组件
Comment thread vue/App.vue Outdated
return {
msg: "有追求的",
msg: "有追求的",
loadingImageUrl: 'https://img0.baidu.com/it/u=1894270481,1645928567&fm=253&fmt=auto&app=138&f=JPEG?w=474&h=500',
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

为什么不用数组呢?

Copy link
Copy Markdown
Owner

@RobinYang11 RobinYang11 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • 图片数据用数组
  • 图片逐个出现

Comment thread vue/components/LoadImage/index.vue Outdated
const preLoad = () => {
const img = new Image()
img.src = props.loading
img.onload = function() {
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

图片能不能逐个出现 ? 提示: 可以借助requestAnimationFrame

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

defer function like this:
image

组件传参更改为数组,使用 requestAnimationFrame 系统分配
@RobinYang11 RobinYang11 merged commit 352e0d5 into RobinYang11:dev Mar 22, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants