JavaScript IntersectionObserver 图片懒加载及文字动态划线

基于 javascript 新dom API IntersectionObserver 和 css 实现页面滚动动态文字下划线效果及图片懒加载。

关于 IntersectionObserver 请看阮一峰老师博客

HTML

<h1>童年的小油灯</h1>
<p>
    初冬时节，天气并不严冷，家里的暖气就送来了丝丝温煦。子夜时分，舒适宜人的室温把我带入了梦乡，不知睡了多久，也不知是醒了还是在梦中，大约就在这种似睡非睡、似醒非醒的溟蒙中，一盏昏黄摇曳的灯火悠然地在我脑际飘摇开来，那憧憧的灯影，轻摆的灯苗，正是伴我生长的那盏小油灯。
    我很诧异自己怎么会在冬日的夜里，在暖融融的现代化高楼里，蓦地想起童年使用过的那盏脏兮兮的小油灯来？不想则已，想起来却如野马脱缰，一夜未眠且不用说，一连几天那盏小油灯的灯嘴、灯芯、灯苗、灯花、灯身的油腻，总在我脑子里打转儿，并且越来越鲜明，越来越生动，以致清晰的像一潭碧水下五彩的石子，光彩照眼，历历在目。
    <mark>我恨不得立马回到老家把它找回来，擦拭干净，珍藏在自己的博物架上，天天看上它一眼。但是，转念一想，时光过去了那么久远，老屋雨天漏水时家什搬来搬去，祖宅多次修葺，那盏魂牵梦绕的小油灯不知能不能找到。</mark>
    我决计回去找一找。不找，肯定没有希望，只要去找就有可能找到。世界上的许多事情都是这样，尽管只有百分之一的希望，你努力了，没准儿这百分之一就能让你遇上；但是，如果不去努力，百分之百的遇不上。
</p>
<p>
    我推开老屋厚重的双扇木门。这间老屋分为里外两间，里间存放粮食杂物，外间有一土炕，当年，我和家人就睡在这铺大炕上。那盏小油灯就挂在大炕上方的土墙上。在寒冷的冬天，屋里难以久坐，我们几个孩子吃过晚饭就得早早地上炕，钻入被窝避寒，母亲则盘腿坐在土炕的一角，借助那豆粒般昏黄的灯光为我们缝补衣衫。她常常一边做针线活儿一边给我们讲故事，故事的内容大多与动物有关，但蕴涵着启迪孩子们心智的精髓。这是我受到的最早的启蒙教育。有时，应我们的要求母亲会在那盏油灯前给我们演“手戏”，随着她俩手灵巧的摆弄，一个个惟妙惟肖的老鹰、小狗、小鸟被赫然印在粗糙的墙面，招来我们一阵热烈的欢呼。
    <mark>
        这是我受到的最早的艺术熏陶。母亲不光做针线活，有时她把纺车搬到炕上纺线，随着她有节律的摇动纺车，她会为我们唱歌——她说那叫“唱曲”。母亲会唱很多首歌，往往把炕上的棉花纺完了，线穗纺了好几个，她的歌儿还没唱完。母亲唱歌的歌词我记不清了，大意多是诉说苦难、祈求安宁的。尽管歌词不同，但她唱出的曲调却都是一样的“千歌一调”，那时竟认为歌儿就是那么唱的，觉着母亲很了不起，能用一个旋律唱出那么多首歌儿。后来上了学，跟老师学会了唱歌，才知道歌儿的曲调是千变万化的，哪首跟哪首也不相同。不管怎样，有生以来我从母亲那里知道了人除了语言之外，还有音乐、歌曲这种表达和交流的方式。
    </mark>
    我在悬挂小油灯的土墙上巡视了多遍，它熏染在墙上的黑迹还在，挂它的铁钉还在，唯独看不到小油灯。于是，我又想到了村里的家谱堂，那里也许有我要找的小油灯。
</p>
<p>
    村里的家谱堂就是祭祀先人的一所祠堂，房屋和庭院结构颇像一座寺院。解放后村里要办学校，没钱盖房就把学校办在了祠堂里，毕竟活人比死人重要，长辈们也没什么人反对。我的小学时光就是在这座祠堂里度过的。老师是个外村人，个子不是太高，胖胖的，有些歇顶，说话鼻音很浓，人却很实在，那时他大约四十来岁，想必现在已经作古了吧。为了带出好学生，除了白天上课，他还要求学生晚上集中到学校做功课。那时，村里没有电，学生们就各自从家里带一盏油灯，放在课桌上，老师也点上一盏放在讲桌上。此刻，教室里星星点点，或者说灯火辉煌，洋溢着浓浓的读书的氛围。老师在课桌间来回缓步，不时伏在某个同学的桌子前，借着油灯的光亮小声指导。
    <mark>有时，他站在讲台上，挥动手臂，大声地讲解问题，把自己高大、粗壮、威武的身影投在黑板上。那时，每节课下来，我们和老师的鼻孔都被油灯熏得黑黑的，大家不经意猛然相视，常会被对方的模样感染得哈哈大笑。</mark>
    如今，那所祠堂的屋顶已经坍塌，只剩四壁，黑板却依旧坚定地贴在砖墙上，只是不见了老师挥舞手臂的身影，更看不到那一盏一盏的小油灯。于是，我又想到了牲口棚，那里或许能满足我得到小油灯的心愿。
</p>
<p>
    牲口棚是生产队的，里面当时喂养着很多头大牲口。由于我祖父担任饲养员的缘故，我常常一放学就往那里跑，有时就与祖父在那里住上一宿。我们睡觉的土炕与拴牲口的地方同属一座屋子，只是在中间砌了一道矮墙。夜里睡觉，牲口们吃草、反刍、拉撒的声音时时传入耳内，鼻子里总是塞满了能让人接受的牛马粪便的臭味。喂养牲口主要在晚间，饲养员要在夜里多次给牲口添加草料，它们才能吃得健壮。饲养员不同于社员，社员白天下地干活，大家集中在一起，又有队长的监督，所以不好偷懒；而饲养员则独自在深深的夜里工作，是否尽职尽责，全在自己。在我们睡觉的土炕与拴牲口地方的那道矮墙上，放着一盏油灯，既能照见我们，又能照见牲口。
    <mark>晚上，祖父借着那盏油灯，端着筛子、簸箕，来来往往，不停地为牲口添草添料。为了引诱它们多吃，祖父常常把草、料搅和在一起，牲口们吃料时不得不吃下更多的饲草。</mark>
    夜里，我一觉醒来，发现油灯还没熄，祖父在灯影下忙碌；再次醒来，油灯还没熄，祖父仍旧在灯影下忙碌。早晨，油灯灭了，祖父却不见了，原来他正在院子里给牲口饮水，准备牵着牲口下地的社员已经在那里等候了。
</p>
<img lazy data-src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg" alt="">
<img lazy data-src="https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg" alt="">
<img lazy data-src="https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg" alt="">
<img lazy data-src="https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg" alt="">
<img lazy data-src="https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg" alt="">
<img lazy data-src="https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg" alt="">
<img lazy data-src="https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg" alt="">

CSS

        body {
             40%;
            margin: auto;
        }

        h1 {
            margin-top: 90vh;
            text-align: center;
        }

        p {
            font-size: 18px;
            letter-spacing: 2px;
        }

        img[lazy] {
             100%;
            min-height: 100px;
            display: block;
        }

        mark {
            background-color: transparent;
            background-image: linear-gradient(red, red);
            background-repeat: no-repeat;
            background-size: 0% 20%;
            background-position: 0 100%;
        }

        mark.active {
            animation: 4s autoLine ease-out forwards;
        }

        @keyframes autoLine {
            to {
                background-size: 100% 20%
            }
        }

JS

    const ob = new IntersectionObserver((e, o) => {
        e.forEach(v => {
            const {isIntersecting, target} = v
            const {nodeName} = target
            if (nodeName === 'IMG' && isIntersecting) {
                target.setAttribute('src', target.getAttribute('data-src'))
                ob.unobserve(target)
            }
            if (nodeName === 'MARK') {
                isIntersecting ? target.classList.add('active') : target.classList.remove('active')
            }
        })
    })

    const marks = document.querySelectorAll('mark')
    const lazyImage = document.querySelectorAll('img[lazy]')
    console.log(lazyImage)
    marks.forEach(v => ob.observe(v))
    lazyImage.forEach(v => ob.observe(v))