使用IntersectionObserver 實現惰性加载（demo）

奋斗钦年

于 2021-02-19 22:31:28 发布

阅读量312

点赞数

分类专栏： js 文章标签： javascript html5

本文链接：https://blog.csdn.net/JQ___/article/details/113873248

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main {
            width: 50%;
        }

        .img {
            display: block;
            height: 200px;
            width: 200px;
            margin: 10px auto;
        }
    </style>
</head>

<body>
    <div class="main">
        <img class="img" src="" alt="">
        <img class="img" src="" alt="">
        <img class="img" src="" alt="">
        <img class="img" src="" alt="">
        <img class="img" src="" alt="">
        <img class="img" src="" alt="">
    </div>

</body>
<script>
    let array = [
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa2.att.hudong.com%2F27%2F81%2F01200000194677136358818023076.jpg&refer=http%3A%2F%2Fa2.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616316943&t=d642abbbc5b984f0a3591b1a1d432958',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa0.att.hudong.com%2F52%2F62%2F31300542679117141195629117826.jpg&refer=http%3A%2F%2Fa0.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616316943&t=929bb81f04613d98a6dfcd423408a6ca',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F35%2F34%2F19300001295750130986345801104.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616316974&t=496647ffa3a424fabac8648902c7f182',
        'https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/9c16fdfaaf51f3de9ba8ee1194eef01f3a2979a8.jpg',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.aiimg.com%2Fuploads%2Fuserup%2F0909%2F2Z64022L38.jpg&refer=http%3A%2F%2Fimg.aiimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616316974&t=2063f669ff6a25f7063dee2b0c6e97ec',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F92%2F04%2F01000000000000119090475560392.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616316974&t=87bfda72fcc5ba77e090052b93a8eff1'
    ]
    for (let i = 0; i < array.length; i++) {
        var observer = new IntersectionObserver(
            function (changes) {
                changes.forEach(function (change) {
                    var container = change.target;
                    // 相交率，默认是相对于浏览器视窗
                    if (change.intersectionRatio > 0) {
                        container.src = array[i]
                        observer.unobserve(container);
                    }
                });
            }
        );
        observer.observe(document.querySelectorAll('.img')[i]);
    }
</script>

</html>

奋斗钦年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用IntersectionObserver 實現惰性加载（demo）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .main {
复制链接

扫一扫

专栏目录