图片懒加载的两种方式要在前端实现图片懒加载，可以使用原生 JavaScript 或者借助一些库。以下是一个简单的实现示例

要在前端实现图片懒加载，可以使用原生 JavaScript 或者借助一些库。以下是一个简单的实现示例，使用原生 JavaScript：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>懒加载示例</title>
    <style>
        .lazy {
            display: none; /* 初始隐藏 */
        }
    </style>
</head>
<body>
    <img class="lazy" data-src="image1.jpg" alt="图片1">
    <img class="lazy" data-src="image2.jpg" alt="图片2">
    <img class="lazy" data-src="image3.jpg" alt="图片3">

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const lazyImages = document.querySelectorAll('.lazy');

            const lazyLoad = (image) => {
                image.src = image.dataset.src; // 设置图片源
                image.classList.remove('lazy'); // 移除懒加载类
                image.onload = () => {
                    image.style.display = 'block'; // 显示图片
                };
            };

            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        lazyLoad(entry.target);
                        observer.unobserve(entry.target); // 停止观察
                    }
                });
            });

            lazyImages.forEach(image => {
                observer.observe(image); // 开始观察每个懒加载图片
            });
        });
    </script>
</body>
</html>

说明：

使用 data-src 属性来存储图片的真实路径，初始时图片的 src 属性为空。
使用 IntersectionObserver API 来检测图片是否进入视口。
当图片进入视口时，设置其 src 属性并显示图片。

这样就实现了基本的图片懒加载功能。如果不使用 IntersectionObserver，可以通过监听滚动事件来实现图片懒加载。以下是一个示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>懒加载示例</title>
    <style>
        .lazy {
            display: none; /* 初始隐藏 */
        }
    </style>
</head>
<body>
    <img class="lazy" data-src="image1.jpg" alt="图片1">
    <img class="lazy" data-src="image2.jpg" alt="图片2">
    <img class="lazy" data-src="image3.jpg" alt="图片3">

    <script>
        function lazyLoadImages() {
            const lazyImages = document.querySelectorAll('.lazy');
            const windowHeight = window.innerHeight;

            lazyImages.forEach(image => {
                const rect = image.getBoundingClientRect();
                if (rect.top < windowHeight && rect.bottom > 0) {
                    image.src = image.dataset.src; // 设置图片源
                    image.classList.remove('lazy'); // 移除懒加载类
                    image.onload = () => {
                        image.style.display = 'block'; // 显示图片
                    };
                }
            });
        }

        window.addEventListener('scroll', lazyLoadImages);
        window.addEventListener('resize', lazyLoadImages);
        document.addEventListener('DOMContentLoaded', lazyLoadImages); // 页面加载时检查
    </script>
</body>
</html>

说明：

使用 data-src 属性来存储图片的真实路径，初始时图片的 src 属性为空。
通过 getBoundingClientRect() 方法获取图片的位置，判断其是否在视口内。
监听 scroll 和 resize 事件，以便在用户滚动或调整窗口大小时加载图片。
页面加载时也会检查是否有图片需要加载。

这种方法虽然不如 IntersectionObserver 高效，但在兼容性方面更好。