前端面试题精选1-原生JS实现图片懒加载

最新推荐文章于 2024-08-20 20:44:43 发布

freedom雲

最新推荐文章于 2024-08-20 20:44:43 发布

阅读量1.6k

点赞数

分类专栏：前端 JavaScript 文章标签：前端面试题 JavaScript

本文链接：https://blog.csdn.net/qq_37205708/article/details/96496929

版权

本文介绍了前端面试中常见的问题，包括使用原生JS实现图片懒加载，处理大量数据渲染不卡顿的策略，将任意标签转换为JSON，理解事件循环，创建sleep函数，以及meta标签的作用。讲解了如何通过视口判断和dataset属性实现懒加载，利用文档碎片和requestAnimationFrame优化批量数据渲染，以及meta标签在字符编码、文档兼容模式和SEO优化等方面的应用。

摘要由CSDN通过智能技术生成

github: 更多文章
推荐在线阅读：点我跳转

1.原生JS实现图片懒加载（考虑不重复加载以及节流）

知识点：视口位置判断，懒加载实现（data-set），节流等

在这里插入图片描述
1.Element.getBoundingClientRect()

该方法返回元素的大小及其相对于视口的位置,具体解释及用法参考 MDN.

通过 Element.getBoundingClientRect().top 与 window.innerHeight（当前视窗的高度）比较就可以判断图片是否出现在可视区域。注意这个 top 是相对于当前视窗的顶部的top值而不是一开始的顶部。

2.通过 Element.dataset 可以获取到为元素节点添加的data-*属性，我们可以通过这个属性来保存图片加载时的url。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
    
            padding: 0;
            margin: 0;
        } 
        img {
    
            display: inline-block;
            width: 100%;
            height: 300px;
            background: gray;
        }
    </style>
</head>

<body>
    <div class="box-image">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i2/252339290/TB29PYUXnIlyKJjSZFrXXXn2VXa_!!252339290-0-beehive-scenes.jpg_180x180xzq90.jpg_.webp" alt="">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i4/2260152888/O1CN01vw2e251XCkJr0VPZU_!!2260152888-0-beehive-scenes.jpg_250x250xz.jpg" alt="">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i3/24687421/TB2Xg1izsyYBuNkSnfoXXcWgVXa_!!24687421-0-beehive-scenes.jpg_250x250xz.jpg" alt="">
        <img src="" class="image-item" lazyload="true" data-original=