uniapp 背景图片懒加载

### 如何在 UniApp 中对背景图片实施懒加载 #### 背景图片懒加载的重要性 为了提高页面性能并减少初始加载时间，对于非首屏显示的背景图片可以采用懒加载技术。这不仅能够节省带宽资源，还能加快页面响应速度。 #### 使用 Intersection Observer API 实现懒加载 由于 `inview` 伪类的支持范围有限，在实际项目中推荐使用更为广泛的解决方案——Intersection Observer API 来判断元素是否进入视口从而触发图片加载[^1]。 #### 占位符设计与加载动画 考虑用户体验方面，应该为即将被替换的真实背景图准备合适的占位符以及过渡效果。可以选择低分辨率版本的小图或者是简单的纯色填充来作为临时替代方案；同时加入淡入等CSS3动画让整个过程更加流畅自然。 #### 具体实现方式 ##### HTML 结构定义 ```html <template> <div class="lazy-bg" :style="{ backgroundImage: 'url(' + loadedSrc + ')' }"> <!-- 内容 --> </div> </template> <script setup> import { ref, onMounted } from "vue"; const props = defineProps({ src: String, }); let loadedSrc = ref(""); let observer; onMounted(() => { const element = document.querySelector(".lazy-bg"); function handleIntersect(entries, observer) { entries.forEach(entry => { if (entry.isIntersecting && !loadedSrc.value) { loadedSrc.value = props.src; observer.unobserve(element); } }); } observer = new IntersectionObserver(handleIntersect); observer.observe(element); }); </script> <style scoped> .lazy-bg { width: 100%; height: 200px; /* 根据实际情况调整 */ background-size: cover; transition: opacity .5s ease-in-out; } /* 初始状态下透明度设为0 */ .lazy-bg:before { content:""; position:absolute; top:0;left:0;right:0;bottom:0; z-index:-1; background-color:#f0f0f0;/* 或者其他颜色/图案 */; } </style> ``` 此代码片段展示了如何利用 Vue 组件配合 JavaScript 和 CSS 创建具有懒加载特性的背景图像组件。当目标区域首次出现在屏幕内时会自动下载指定 URL 的高清晰度原图，并将其应用于样式属性之中完成渐变展示的效果。