IntersectionObserver图片懒加载及用户体验优化

前提

熟知的图片懒加载的方式是使用getBoundingClientRect函数判断是否在可视区域内，但是调用这个函数会引起回流，影响浏览器性能。可替代的方式是使用IntersectionObserver对象，使用方式参考IntersectionObserver API 使用教程——阮一峰
关于回流，参考前端优化总结

正题

先看效果：

模拟图片加载堵塞的情况，图片到达可视区域2s后才加载出图片，在图片加载出来之前鼠标移动到图片上时可显示图片描述文字

上代码：

原理：<img alt='xxx'>是非替换元素，而加上src属性后变为替换元素，替换元素的::before/after是无效的，所以能在图片加载出来后隐藏掉文字描述
关于替换元素，参考CSS替换元素和非替换元素

//html:
    <!-- 模拟懒加载 -->
    <div style="height: 120vh;"></div>
    <img id="img" alt="虎豹">
//CSS:
		img {
            /* <img>元素表现为内联元素样式 */
            display: block;
            width: 400px;
            height: 300px;
            outline: 1px solid sandybrown;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }

        img::after {
            content: attr(alt);
            position: absolute;
            bottom: 0;
            left: 0;
            /* 让文字描述部分溢出图片显示区域并隐藏 */
            transform: translateY(100%);
            background-color: rgba(0, 0, 0, 0.4);
            width: 100%;
            height: 40px;
            /* 垂直水平居中 */
            text-align: center;
            line-height: 40px;
            transition: .5s ease;
        }

        img:hover::after {
            /* hover状态下文字描述部分上浮出来 */
            transform: translateY(0);
        }

//js:
  //图片懒加载：到达可视区域才加载
    let observer = new IntersectionObserver(entries => {
        if (entries[0].intersectionRatio <= 0) return;
        //模拟图片加载时间，2s后图片显示出来
        setTimeout(() => {
            let img = entries[0].target
            img.src = './assets/bao.jpg'
        }, 2000);
    })
    observer.observe(document.getElementById('img'))

参考《CSS世界》-张鑫旭