背景原生图片加载慢，使用替代背景

最新推荐文章于 2023-11-11 10:55:07 发布

前端小云儿

最新推荐文章于 2023-11-11 10:55:07 发布

阅读量100

点赞数

分类专栏：前端静态页面以及逻辑文章标签：前端 javascript html

本文链接：https://blog.csdn.net/jieweiwujie/article/details/133322020

版权

前端静态页面以及逻辑专栏收录该内容

117 篇文章 16 订阅 ¥9.90 ¥199.90

订阅专栏

超级会员免费看

在前端开发中，遇到原生HTML背景图片加载速度慢，影响用户体验的情况。本文提出通过预加载、懒加载等技术手段，结合JavaScript和CSS优化策略，有效提高背景图片的加载速度，确保页面流畅展示。

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

<template>
  <div class="demo-style">
    如果是背景图片的话，背景找一个相似的颜色，可以看起来不那么单调，不然白色一片
    <!-- 这里使用v-if 就不会触发 -->
    <div class="div" :style="{ backgroundImage: `url(${src1})` }">123</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      src1: require("../assets/pc-img/banner2.png"),
    };
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.demo-style {
  .div {
    border: 1px solid red;
    width: 100%;
    height: calc(100vh - 0px);
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: aquamarine;
  }
}
</style>