最后
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。
// 创建IntersectionObserver实例
const observer = new IntersectionObserver((entries, observer) => {
// 遍历观察的元素
entries.forEach(entry => {
// 如果元素可见
if (entry.isIntersecting) {
// 加载图片
const img = entry.target;
const src = img.getAttribute('data-src');
img.setAttribute('src', src);
// 停止观察该元素
observer.unobserve(img);
}
});
});
// 获取所有需要懒加载的图片元素
const lazyImages = document.querySelectorAll('.lazy-image');
// 观察每个图片元素
lazyImages.forEach(image => {
observer.observe(image);
});
🚀 实践
接下来我们实现一个通用的 hook，基本的功能如下：
- 给图片提供默认的占位图片
src，同时提供data-src属性 - 传入图片对应的
ref属性。 - 当图片进入可视区域时，使用
data-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("data-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"
:data-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("data-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);
### 最后
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。
包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。
* HTML5新特性，语义化
* 浏览器的标准模式和怪异模式
* xhtml和html的区别
* 使用data-的好处
* meta标签
* canvas
* HTML废弃的标签
* IE6 bug，和一些定位写法
* css js放置位置和原因
* 什么是渐进式渲染
* html模板语言
* meta viewport原理
* **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://docs.qq.com/doc/DSmRnRGxvUkxTREhO)**
