时间戳

首页 > 解决方案 > VUE.JS - 如何在加载静态图像时提高性能

javascript - VUE.JS - 如何在加载静态图像时提高性能

问题描述

我在 Vue.js 中有一个简单的应用程序，我有一个在屏幕上加载 1 个图像和 2 个文本的组件，非常简单。

但是我注意到，每次加载图像都比文本需要几毫秒的时间，给人一种缓慢的印象。

还有一条信息，有时加载速度很快，有时需要一段时间才能加载。这与我的机器性能有关吗？

有没有办法让我优化这个图像加载，这样它就不会向客户显示这个加载？

图片

**Dispenser.vue**
<template>
    <div>
        <gui-action1 :imageName="this.imageName" :title="this.title" :message="this.message" :showLoader="false">
        </gui-action1>
        
    </div>
</template>

<script>

import Action1 from '../../Guidance/Action1.vue'

export default {
    data(){
        return{
            optionSelected: this.$route.params.optionSelected,
            imageName: 'Organization_Image_Interaction_WaitCountReal',
            title: 'Ainda não finalizamos',
            message: 'Aguarde a contagem das notas'
        }
    },
    components: {
        'gui-action1': Action1
    },
    created(){
        setTimeout( () => this.$router.push({ path: "/withdraw/finishing"}), 4000);
    }
}
</script>
<style >
    @media screen and (max-width: 1280px) {
    }
</style>

**Action.vue (Component)**
<template>
    <div class="guidance">
        <div class="guidance-title" >
            {{title}}
        </div>
        <div class="guidance-image" >
            <img :src="require('../../../static/' +`${imageName}`+ '.svg')">
        </div>
        <div class="guidance-message" >
            {{message}}
        </div>
        <div v-bind:class="{ 'loader': showLoader }" ></div>
    </div>
</template>

<script>

export default {
    props: ['imageName', 'title', 'message', 'showLoader'],

    data(){
        return{
            imageNameDefault: 'Organization_Image_Interaction_WaitCountReal'   
        }
    }
}
</script>

<style>
    @media screen and (max-width: 1280px) {
        .guidance{
            position: relative;
            top: 70px;
            left: 30px;
        }
        .guidance-image{
            position: relative;
            top:200px;
            left: 220px;
        }

        .guidance-title{
            position: relative;
            top:140px;
            left: -40px;
            font-size: 55px;
            color: white;
            text-align: center;
        }

        .guidance-message{
            position: absolute;
            width: 100%;
            top:650px;
            left: -40px;
            font-size: 55px;
            color: white;
            text-align: center;
        }

        .loader {
            border: 7px solid #f3f3f3; /* Light grey */
            border-top: 7px solid #386083; /* Blue */
            border-radius: 50%;
            width: 130px;
            height: 130px;
            animation: spin 1.5s linear infinite;
            position: relative;
            left: 518px;
            top: -80px;
            opacity: 60%;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    }
</style>

标签： javascripthtmlcssvue.js

解决方案

您可以使用cloudinary-vue进行一些超级简单但高性能的图像加载。

它可以在加载时允许一些简单的图像占位符

<cld-image 
  public-id="sample" 
  loading="lazy">
  <cld-placeholder 
    type="vectorize">
  </cld-placeholder>
</cld-image>

这是一个 Gatsby.js (React) 演示，但它非常清楚地展示了它如何与 Cloudinary 一起工作：https ://using-gatsby-image.gatsbyjs.org/blur-up/ （单击页面顶部的等Blur up）Traced SVG.

Ofc，Cloudinary 也会相应地调整它的大小以适应您的屏幕，可能会将其格式化为.webp甚至.avif（测试版），从一个很酷的 CDN 提供它，并且可以做很多其他的事情。不能推荐它足够的tbh。检查他们的文档并尝试一下，它是免费的，所以你不会有太多损失。

webperf有很多内容（对于一个简单的答案来说太多了），这可能是关于这个主题的最好的文章之一（每年编辑），如果你想要一个快速的实现，你会得到一个详尽的列表网站：https ://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/

推荐阅读