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

最新推荐文章于 2023-05-15 20:10:33 发布

Passion is Energy

最新推荐文章于 2023-05-15 20:10:33 发布

阅读量411

点赞数

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

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

版权

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.

最低0.47元/天解锁文章

Passion is Energy

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
原生图片懒加载和 react组件封装图片懒加载

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"> <
复制链接

扫一扫