前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue 图片预加载

Vue 图片预加载

作者头像
长安不见使人愁
发布2022-11-01 15:33:49
2.4K0
发布2022-11-01 15:33:49
举报
文章被收录于专栏:给时光以生命

在媒体资源较多的情况下渲染页面,即使采用了CDN,但如果客户端受带宽限制,资源的加载会很慢。页面资源(通常是图片)加载慢会影响动画效果,甚至使页面看起来很卡顿。 为了解决这一问题,可以使用预加载的方式,在页面打开之前,提前将其所需的资源加载到浏览器缓存。 在Vue中,可以将预加载的操作放在合适的生命周期钩子函数内,比如在前一个组件挂载后就加载后一个组件所需的资源。以下是Vue3组合式api写法。

代码语言:javascript
复制
setup() {
    const imgList = [
      "https://cdn.example.com/1.jpg",
      "https://cdn.example.com/2.jpg",
      "https://cdn.example.com/3.jpg",
      "https://cdn.example.com/4.jpg",
    ];

    //图片预加载
    const loadImg = (imgList) => {
      for (let i = 0; i < imgList.length; i++) {
        let img = new Image()
        let currentSrc = ''
        img.src = imgList[i]
        img.onload = function (e) {
          //二次缓存,主要针对带中文的图片链接
          if (currentSrc.length === 0) {
            currentSrc = this.currentSrc
            img.src = currentSrc
            console.log('二次缓存');
          }
          console.log('加载完毕', e, this.currentSrc);
        }
        img.onerror = function (e) {
          console.log('加载错误', e);
        }
      }
    }

    onMounted(() => {
    	loadImg(imgList);
    })

    return {
      loadImg,
      imgList,
      onMounted
    };
},

我的博客即将同步至腾讯云开发者社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=19ip817zxnl5s

Q.E.D.

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
内容分发网络 CDN
内容分发网络(Content Delivery Network,CDN)通过将站点内容发布至遍布全球的海量加速节点,使其用户可就近获取所需内容,避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题,有效提升下载速度、降低响应时间,提供流畅的用户体验。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档