最后更多分享：前端字节跳动真题解析

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 

公众号：萌萌哒草头将军

实际效果如下


![](https://img-blog.csdnimg.cn/0e50837e56aa4a3695322b099959c527.png)



虽然基本的功能要求已经完成了，但是现在还不够优雅！！！


#### 🚀 优化


接下来，我们增加个过渡动画。每次当加载完图片，就从占位图过渡到正常图片模式。

img.onload = () => {
img.setAttribute(‘class’, ‘fade-in’)
}

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

/* 应用淡入动画到元素 */
.fade-in {
animation: fadeIn 0.6s ease-in;
}

 ![](https://img-blog.csdnimg.cn/8df27655f59340899f395d9f4d3b7834.png)



完整代码如下：

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]));
});
};

公众号：萌萌哒草头将军

#### **前端面试题库 （**面试必备）****推荐：★★★★★****


地址：[前端面试题库](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)


### 文末

js前端的重头戏，值得花大部分时间学习。

![JavaScript知识](https://img-blog.csdnimg.cn/img_convert/701f4db8e7fc0c3ff4d87017d6c846be.png)

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

![前端电子书](https://img-blog.csdnimg.cn/img_convert/6065b7d33c9a5859971490467a967767.png)

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。



学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

**这是288页的前端面试题**

![288页面试题](https://img-blog.csdnimg.cn/img_convert/6a0ed19303290ef201081fc6148f21db.png)

料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

**这是288页的前端面试题**

![288页面试题](https://img-blog.csdnimg.cn/img_convert/6a0ed19303290ef201081fc6148f21db.png)