js实现图片懒加载效果

图片懒加载效果是指当用户滚动页面时，只有当图片进入浏览器可视区域内时才进行图片加载，以提升网站的加载速度和用户的体验。以下是实现图片懒加载效果的完整攻略：

1. 设置图片占位符

在HTML中，为需要进行懒加载的图片设置占位符，通常可以使用下面两种方式：

• 直接在img标签中设置占位符，例如：<img src="placeholder.png" data-src="actual_image.jpg" />。其中src属性为占位符图片，data-src属性为需要懒加载的图片路径。
• 使用CSS样式为img标签设置占位符，例如：.lazy-img { background-image: url('placeholder.png') }，然后在HTML中使用<img class="lazy-img" data-src="actual_image.jpg" />添加需要懒加载的图片。

2. 监听滚动事件

可以使用window对象的scroll事件来监听页面滚动，当页面滚动到图片位置时进行加载。例如：

window.addEventListener('scroll', function() {
    // 获取所有需要懒加载的图片
    const lazyImages = document.querySelectorAll('img[data-src]');

    // 遍历图片，判断是否进入可视区域
    lazyImages.forEach(function(lazyImage) {
        if (lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) {
            lazyImage.src = lazyImage.dataset.src;
            lazyImage.removeAttribute('data-src');
        }
    });
});

在上面的示例中，我们首先使用querySelectorAll方法获取所有需要懒加载的图片，然后遍历所有图片，通过getBoundingClientRect方法获取图片的相对位置，如果图片进入了浏览器的可视区域，则将图片的src属性设置为原来的data-src属性值，并移除data-src属性，以防止多次加载同一张图片。

示例1：使用jQuery实现图片懒加载效果

如果你不想使用原生JavaScript来实现图片懒加载效果，可以使用jQuery库来简化代码。下面是一个使用jQuery实现图片懒加载效果的示例：

$(window).on('scroll', function() {
    $('img[data-src]').each(function() {
        if ($(this).offset().top <= $(window).scrollTop() + $(window).height() && !$(this).attr('src')) {
            $(this).attr('src', $(this).data('src'));
        }
    });
});

在这个示例中，我们首先绑定了window对象的scroll事件，并使用each方法遍历所有需要懒加载的图片。然后，通过判断图片的位置和是否已经加载，来判断是否需要加载图片。

示例2：使用IntersectionObserver实现图片懒加载效果

如果你想进一步提升页面的性能，可以使用IntersectionObserver API来实现懒加载效果。IntersectionObserver可以观测指定元素是否进入了浏览器可视区域内，从而进行相关操作。具体用法如下：

const lazyImages = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver(function(entries) {
    entries.forEach(function(entry) {
        if (entry.isIntersecting) {
            const lazyImage = entry.target;
            lazyImage.src = lazyImage.dataset.src;
            lazyImage.removeAttribute('data-src');
            observer.unobserve(lazyImage);
        }
    });
});

lazyImages.forEach(function(lazyImage) {
    observer.observe(lazyImage);
});

在这个示例中，我们首先使用querySelectorAll方法获取需要懒加载的图片，然后使用IntersectionObserver API来观测图片是否进入可视区域。在IntersectionObserver的回调函数中，我们判断图片是否进入可视区域，并设置图片的src属性，同时移除data-src属性以防止多次加载。最后，使用unobserve方法停止观测该图片。在循环遍历所有需要懒加载的图片时，我们使用observe方法开始对图片进行观测。

以上就是实现图片懒加载效果的完整攻略，通过以上几个示例，你可以根据自己的需求选择适合自己的技术实现方式。