nuxt中图片预加载

肥肥呀呀呀

已于 2023-03-07 22:43:57 修改

阅读量3k

点赞数 1

分类专栏：工作经验文章标签：前端 javascript html5

于 2023-02-05 13:01:53 首次发布

本文链接：https://blog.csdn.net/weixin_43575775/article/details/128889796

版权

工作经验专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在Nuxt.js环境中，由于服务器渲染的特性，无法直接使用newImage()进行图片预加载。为解决此问题，文章提出了利用`<client-only>`标签在客户端进行动态创建Image对象并设置src属性，从而实现图片的预加载，确保在用户访问时能快速显示。

摘要由CSDN通过智能技术生成

使用原理

使用动态创建标签的方式提前加载好图片到本地
nuxt中因为是服务器渲染没有new Image() 对象所以加上标签表示客户端渲染

preloadImg() {
      this.$nextTick(() => {
        let preloadImgs = [
          "https://scrm-pic.cdn.buerkongjian.com/static/image/quiz-pc/weibo-hover.svg",
          "https://scrm-pic.cdn.buerkongjian.com/static/image/quiz-pc/weixin-hover.svg",
        ];
        preloadImgs.forEach((item) => {
          <client-only>
              new Image().src = item;
           </client-only>;
        });
      });
    },