原生图片懒加载和 react组件封装图片懒加载

最新推荐文章于 2024-08-04 13:48:15 发布

Passion is Energy

最新推荐文章于 2024-08-04 13:48:15 发布

阅读量429

点赞数

分类专栏： ReactJS 文章标签： react.js

本文链接：https://blog.csdn.net/brucehongsen/article/details/120364707

版权

本文介绍了如何实现原生图片的懒加载，并详细讲解了在React中封装图片懒加载组件的方法，通过一次封装，实现组件的无限复用，提升应用性能。

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

1. 原生图片懒加载

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 滚动条到 2000px 后再加载 */
    .top {
        height: 2000px;
    }
</style>

<body>
    <div class="top">top</div>

    <div class="wrapper">
        <img data-src="./myLazy.png">
    </div>
</body>

<script>
    //  获取 dom 元素
    let myImg = document.querySelector('img')

    // 调用方法
    let observer = new IntersectionObserver(function ([{ isIntersecting }]) {

        if (isIntersecting) {
            // 赋值
            myImg.src = myImg.dataset.