js图片懒加载怎么实现

懒加载（Lazy Loading）是优化网页性能的有效策略，可以提高页面加载速度、减少带宽消耗、提升用户体验。具体实现方式包括使用Intersection Observer API、监听滚动事件、以及第三方库。Intersection Observer API是最推荐的方法，因为它高效、简单、支持现代浏览器。

一、什么是懒加载

懒加载是一种网页优化技术，通过延迟加载页面中不可见的部分内容来提升页面初始加载速度。对于图片懒加载，当用户滚动到图片所在的位置时才进行加载，从而减少初始加载时间和带宽使用。

二、为什么要使用懒加载

使用懒加载的主要原因有：

提升页面加载速度：减少初始加载资源，提升首屏加载体验。
节省带宽：只加载用户实际观看的图片，节省数据流量。
提升用户体验：提高页面响应速度，减少浏览器卡顿。

三、如何实现图片懒加载

1. 使用Intersection Observer API

Intersection Observer API是现代浏览器提供的一种高效观察DOM元素是否进入视口的方法。其实现步骤如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lazy Loading Example</title>
    <style>
        img {
            display: block;
            margin: 50px auto;
            width: 300px;
            height: 200px;
            background-color: #f3f3f3;
        }
    </style>
</head>
<body>
    <img data-src="image1.jpg" alt="Image 1">
    <img data-src="image2.jpg" alt="Image 2">
    <img data-src="image3.jpg" alt="Image 3">
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let lazyImages = [].slice.call(document.querySelectorAll("img[data-src]"));
            let active = false;
            const lazyLoad = function() {
                if (active === false) {
                    active = true;
                    setTimeout(function() {
                        lazyImages.forEach(function(lazyImage) {
                            if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
                                lazyImage.src = lazyImage.getAttribute("data-src");
                                lazyImage.removeAttribute("data-src");
                                lazyImages = lazyImages.filter(function(image) {
                                    return image !== lazyImage;
                                });
                                if (lazyImages.length === 0) {
                                    document.removeEventListener("scroll", lazyLoad);
                                    window.removeEventListener("resize", lazyLoad);
                                    window.removeEventListener("orientationchange", lazyLoad);
                                }
                            }
                        });
                        active = false;
                    }, 200);
                }
            };
            document.addEventListener("scroll", lazyLoad);
            window.addEventListener("resize", lazyLoad);
            window.addEventListener("orientationchange", lazyLoad);
        });
    </script>
</body>
</html>

2. 监听滚动事件

使用滚动事件监听是一种传统的方法，但它的效率相对较低，可能会导致性能问题。以下是一个简单的实现例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lazy Loading Example</title>
    <style>
        img {
            display: block;
            margin: 50px auto;
            width: 300px;
            height: 200px;
            background-color: #f3f3f3;
        }
    </style>
</head>
<body>
    <img data-src="image1.jpg" alt="Image 1">
    <img data-src="image2.jpg" alt="Image 2">
    <img data-src="image3.jpg" alt="Image 3">
    <script>
        function isInViewport(el) {
            const rect = el.getBoundingClientRect();
            return (
                rect.top >= 0 &&
                rect.left >= 0 &&
                rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
                rect.right <= (window.innerWidth || document.documentElement.clientWidth)
            );
        }
        function lazyLoad() {
            const images = document.querySelectorAll('img[data-src]');
            images.forEach(image => {
                if (isInViewport(image)) {
                    image.src = image.getAttribute('data-src');
                    image.removeAttribute('data-src');
                }
            });
        }
        document.addEventListener('scroll', lazyLoad);
        window.addEventListener('resize', lazyLoad);
        window.addEventListener('orientationchange', lazyLoad);
    </script>
</body>
</html>

3. 使用第三方库

如果不想自己实现懒加载逻辑，可以使用第三方库，比如LazyLoad.js。其优势是简化开发工作，兼容性更好，功能更丰富。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lazy Loading Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/17.1.2/lazyload.min.js"></script>
    <style>
        img {
            display: block;
            margin: 50px auto;
            width: 300px;
            height: 200px;
            background-color: #f3f3f3;
        }
    </style>
</head>
<body>
    <img data-src="image1.jpg" alt="Image 1" class="lazy">
    <img data-src="image2.jpg" alt="Image 2" class="lazy">
    <img data-src="image3.jpg" alt="Image 3" class="lazy">
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var lazyLoadInstance = new LazyLoad({
                elements_selector: ".lazy"
            });
        });
    </script>
</body>
</html>

四、懒加载的注意事项

1. SEO影响

懒加载可能会影响SEO，因为搜索引擎机器人可能不会执行JavaScript，不会看到懒加载的图片。解决方法是使用noscript标签来提供备用内容。

<noscript>
    <img src="image1.jpg" alt="Image 1">
</noscript>

2. 性能优化

懒加载本身是一种性能优化，但过多的监听事件可能会带来性能问题。可以使用防抖（debounce）或节流（throttle）技术来优化滚动事件的监听。

function debounce(func, wait = 20, immediate = true) {
    let timeout;
    return function() {
        let context = this, args = arguments;
        let later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        let callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
}
const optimizedLazyLoad = debounce(lazyLoad);
document.addEventListener('scroll', optimizedLazyLoad);

五、总结

懒加载是优化网页性能的有效策略，主要通过延迟加载页面中的不可见内容来提升页面初始加载速度。实现懒加载的方法有多种，包括使用Intersection Observer API、监听滚动事件、以及第三方库。每种方法都有其优缺点，选择适合自己项目的实现方式非常重要。Intersection Observer API 是最推荐的方法，因为它高效、简单、支持现代浏览器。使用懒加载时需注意SEO影响和性能优化，可以通过添加noscript标签和使用防抖/节流技术来解决这些问题。

在实际项目中，可以根据项目需求选择合适的懒加载实现方式，并结合研发项目管理系统PingCode 和 通用项目协作软件Worktile 来进行项目管理，提高团队协作效率。