高级前端——IntersectionObserver懒加载

学习懒加载性能优化的时候,发现了很多方法,传统的就是监听窗口距离顶部的位置来控制是否显图片。这样做想想就知道不合理,只要鼠标顶一下,代码就不断在跑。

发现了一个IntersectionObserver接口。
貌似很方便。

这个本身就是浏览器的接口。监听的是可视区域。

直接代码:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="demo">
        <img data-src='./WechatIMG194.jpeg' src="./WechatIMG199.jpeg" alt="">
        <img data-src='./WechatIMG196.jpeg' src="./WechatIMG199.jpeg" alt="">
        <img data-src='./WechatIMG197.jpeg' src="./WechatIMG199.jpeg" alt="">
        <img data-src='./WechatIMG194.jpeg' src="./WechatIMG199.jpeg" alt="">
        <img data-src='./WechatIMG196.jpeg' src="./WechatIMG199.jpeg" alt="">
        <img data-src='./WechatIMG197.jpeg' src="./WechatIMG199.jpeg" alt="">
        <img data-src='./WechatIMG194.jpeg' src="./WechatIMG199.jpeg" alt="">
        <img data-src='./WechatIMG196.jpeg' src="./WechatIMG199.jpeg" alt="">
        <img data-src='./WechatIMG197.jpeg' src="./WechatIMG199.jpeg" alt="">
        <img data-src='./WechatIMG194.jpeg' src="./WechatIMG199.jpeg" alt="">
        <img data-src='./WechatIMG196.jpeg' src="./WechatIMG199.jpeg" alt="">
        <img data-src='./WechatIMG197.jpeg' src="./WechatIMG199.jpeg" alt="">
        <img data-src='./WechatIMG194.jpeg' src="./WechatIMG199.jpeg" alt="">
        <img data-src='./WechatIMG196.jpeg' src="./WechatIMG199.jpeg" alt="">
        <img data-src='./WechatIMG197.jpeg' src="./WechatIMG199.jpeg" alt="">
        <img data-src='./WechatIMG194.jpeg' src="./WechatIMG199.jpeg" alt="">
        <img data-src='./WechatIMG196.jpeg' src="./WechatIMG199.jpeg" alt="">
        <img data-src='./WechatIMG197.jpeg' src="./WechatIMG199.jpeg" alt="">
        <img data-src='./WechatIMG194.jpeg' src="./WechatIMG199.jpeg" alt="">
        <img data-src='./WechatIMG196.jpeg' src="./WechatIMG199.jpeg" alt="">
        <img data-src='./WechatIMG197.jpeg' src="./WechatIMG199.jpeg" alt="">
    </div>
</body>

<style>

</style>
<script>
    // 元素集合
    function query(selector) {
        return Array.from(document.querySelectorAll(selector));
    }

    let io = new IntersectionObserver((item) => {
        // 当intersectionRatio>0是可见区域
        if (item[0].intersectionRatio > 0) {
            let elem = item[0].target;
            // 获取图片链接
            let src = elem.getAttribute('data-src');
            // 设置图片链接
            elem.setAttribute('src', src);
        }
    });


    query('img').forEach(function (item) {
        io.observe(item);
    });

</script>

</html>

看到刘看齐的network首先是加载一张默认图片,和第一张可视的图片,活动鼠标向下走才是加载其他图片。
perfect。

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注