【Vuejs】1811- Vue3如何优雅的加载图片
前端自习课
共 6840字,需浏览 14分钟
· 2023-09-25
最近开发了一个功能,页面首页会加载大量的图片,初次进入页面时,会导致页面性能下降,
于是乎,我改进了这个功能,可以让所有图片自动懒加载。
🚀 原理
这个功能主要的底层逻辑是是使用IntersectionObserver
API
,IntersectionObserver
用于在浏览器中观察元素的可见性和位置变化。它可以帮助开发者实现一些动态行为,如图片的懒加载、无限滚动等。
简单的示例如下:
// 创建IntersectionObserver实例
const observer = new IntersectionObserver((entries, observer) => {
// 遍历观察的元素
entries.forEach(entry => {
// 如果元素可见
if (entry.isIntersecting) {
// 加载图片
const img = entry.target;
const src = img.getAttribute('src');
img.setAttribute('src', src);
// 停止观察该元素
observer.unobserve(img);
}
});
});
// 获取所有需要懒加载的图片元素
const lazyImages = document.querySelectorAll('.lazy-image');
// 观察每个图片元素
lazyImages.forEach(image => {
observer.observe(image);
});
🚀 实践
接下来我们实现一个通用的 hook
,基本的功能如下:
-
给图片提供默认的占位图片 src
,同时提供src
属性 -
传入图片对应的 ref
属性。 -
当图片进入可视区域时,使用 src
属性替换src
属性
import { onMounted, Ref } from "vue";
const options = {
// root: document.querySelector(".container"), // 根元素,默认为视口
rootMargin: "0px", // 根元素的边距
threshold: 0.5, // 可见性比例阈值
once: true,
};
function callback(
entries: IntersectionObserverEntry[],
observer: IntersectionObserver
) {
entries.forEach((entry) => {
// 处理每个目标元素的可见性变化
if (entry.intersectionRatio <= 0) return;
const img: Element = entry.target;
const src = img.getAttribute("src");
img.setAttribute("src", src ?? ""); // 将真实的图片地址赋给 src 属性
observer.unobserve(img);
});
}
export const useInView = (ref: Ref) => {
const observer = new IntersectionObserver(callback, options);
onMounted(() => {
Object.keys(ref.value).forEach((e) => observer.observe(ref.value[e]));
});
};
<script setup lang="ts">
import { ref } from "vue";
import { useInView } from "./hooks/useInView";
const imgRef = ref(null);
useInView(imgRef);
</script>
<template>
<h4>公众号:萌萌哒草头将军</h4>
<div
v-for="(_, idx) in new Array(200).fill(11)"
>
<img
ref="imgRef"
src="https://via.placeholder.com/200"
:src="`https://picsum.photos/200/${180 + idx}`"
alt="b"
/>
</div>
</template>
实际效果如下
虽然基本的功能要求已经完成了,但是现在还不够优雅!!!
🚀 优化
接下来,我们增加个过渡动画。每次当加载完图片,就从占位图过渡到正常图片模式。
img.onload = () => {
img.setAttribute('class', 'fade-in')
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* 应用淡入动画到元素 */
.fade-in {
animation: fadeIn 0.6s ease-in;
}
完整代码如下:
import { onMounted, Ref } from "vue";
const options = {
// root: document.querySelector(".container"), // 根元素,默认为视口
rootMargin: "0px", // 根元素的边距
threshold: 0.5, // 可见性比例阈值
once: true,
};
function callback(
entries: IntersectionObserverEntry[],
observer: IntersectionObserver
) {
entries.forEach((entry) => {
if (entry.intersectionRatio <= 0) return;
const img = entry.target as HTMLImageElement;
const src = img.getAttribute("src");
img.setAttribute("src", src ?? ""); // 将真实的图片地址赋给 src 属性
img.onload = () => {
img.setAttribute("class", "fade-in");
};
observer.unobserve(img);
});
}
export const useInView = (ref: Ref) => {
const observer = new IntersectionObserver(
callback,
options
);
onMounted(() => {
Object.keys(ref.value)
.forEach((e) => observer.observe(ref.value[e]));
});
};
<script setup lang="ts">
import { ref } from "vue";
import { useInView } from "./hooks/useInView";
const imgRef = ref(null);
useInView(imgRef);
</script>
<template>
<h4>公众号:萌萌哒草头将军</h4>
<div
v-for="(_, idx) in new Array(200).fill(11)"
style="width: 200px height: 200px;"
>
<img
ref="imgRef"
style="height: 100%"
src="https://via.placeholder.com/200"
:src="`https://picsum.photos/200/${180 + idx}`"
alt="b"
/>
</div>
</template>
<style scoped>
/* 定义淡入动画 */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* 应用淡入动画到元素 */
.fade-in {
animation: fadeIn 0.6s ease-in;
}
</style>
评论
jPicture图片加载
jPicture是一个jQuery插件,它可以在右视图端口上加载图片。jPicture只在页面上显示最合适的图片版本。示例代码:$('#super-pic').jp({ 'test_imgs/w
jPicture图片加载
0
图片加载失败的前端解决方案
来源 | www.fly63.com在实际项目中,不可避免的会遇到在页面中加载大量图片,但可能由于网络问题,或者图片文件缺失等问题,导致图片不能正常展示,并且在不同浏览器处理错误图片是不一样的,有的干脆就显示差号,例...
web前端开发
0
ImageLoaderSampleImageView异步加载图片
这个可以实现ImageView异步加载图片,内存缓存,文件缓存,imageview显示图片时增加淡入
ImageLoaderSampleImageView异步加载图片
0