1.图片预加载

图片预加载的核心是使用Image()方法创建图片对象，然后使用图片对象的深入src属性加载图片，当图片加载完成后再显示图片页面，这样就可以实现图片页面的顺畅加载。

<body>
    <script>
        const imgs = ['./images/1.jpeg', './images/2.jpg']
        let count = 0
        for (let img of imgs) {
            let image = new Image()
            image.src = img
            console.log('图片加载中...')
            image.onload = () => {
                count++
                if (imgs.length === count) {
                    console.log('所有图片渲染完成');
                }
            }
        }
    </script>
    <img src="./images/1.jpeg" alt="">
    <img src="./images/2.jpg" alt="">
    <style>
        img {
            width: 200px;
        }
    </style>
</body>

2.图片懒加载

图片懒加载使用IntersectionObserver（不支持万恶的IE） API创建观察对象，创建时传入回调函数，当观察到所观察的图片与可视区域有交集时，就会执行传入的回调函数，想要观察图片，需要使用观察对象的observe()方法添加观察图片，也可以使用unobserve()方法取消观察。

<body>
    <p>JavaScript 图片懒加载 - Web前端工程师面试题讲解</p>
    <p>JavaScript 图片懒加载 - Web前端工程师面试题讲解</p>
    <p>JavaScript 图片懒加载 - Web前端工程师面试题讲解</p>
    <p>JavaScript 图片懒加载 - Web前端工程师面试题讲解</p>
    <p>JavaScript 图片懒加载 - Web前端工程师面试题讲解</p>
    <p>JavaScript 图片懒加载 - Web前端工程师面试题讲解</p>
    <img data-src="./images/1.jpeg" alt="">
    <img data-src="./images/2.jpg" alt="">
    <img data-src="./images/logo.png" alt="">
    <script>
        const images = document.querySelectorAll('img')
        const callback = events => {
            events.forEach(item => {
                if (item.isIntersecting) {
                    const target = item.target
                    const data_src = target.getAttribute('data-src')
                    target.setAttribute('src', data_src)
                    observer.unobserve(target)
                }
            })
        }
        const observer = new IntersectionObserver(callback)
        images.forEach(image => {
            observer.observe(image)
        })
    </script>
    <style>
        p {
            height: 150px;
            line-height: 150px;
        }

        img {
            width: 300px;
            margin-top: 200px;
            display: block;
        }
    </style>
</body>

图片预加载和懒加载

1.图片预加载

2.图片懒加载