时间戳

首页 > 解决方案 > 如何在 vue.js 3 和 quasar 中延迟加载 css 背景图像？

css - 如何在 vue.js 3 和 quasar 中延迟加载 css 背景图像？

问题描述

当我在我的类星体应用程序中添加图像时，我使用q-img组件，它使用延迟加载来加载图像，当用户像这样滚动到它们时：

<q-img
      src="https://placeimg.com/500/300/nature"
      loading="lazy"
      spinner-color="white"
      height="140px"
      style="max-width: 150px"
/>

这减少了初始页面加载时间，仅在用户需要查看图像时才加载图像，并允许我添加高质量图像而不必担心应用程序运行缓慢。

但是我不能在背景图像中执行此操作，因为我在 css 中添加背景图像，如下所示：

.landing-section {
  height: 37rem;
  background: url("/images/home/landing-section/landing-img.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 20%;
  display: flex;
  align-items: center;
}

背景图像允许您将图像堆叠在一起并轻松地在它们之上添加内容，而无需使用诸如absolutecss 属性或grid.

有没有办法在它们来查看（用户滚动到它们）时延迟加载背景图像？

如果没有，有没有办法在同一页面中延迟加载组件到视口？

标签： cssvuejs3quasar-framework

解决方案

推荐阅读