如何用JavaScript实现图片懒加载？

用javascript实现图片懒加载的步骤包括：1.检测图片是否进入视口，2.替换图片的src属性以触发加载。可以通过intersectionobserver api或scroll事件来实现，建议优先使用intersectionobserver api以提升性能。

图片懒加载在现代Web开发中是一个关键技术，特别是在处理大量图片或资源时，它可以显著提升页面加载速度和用户体验。那么，如何用JavaScript实现图片懒加载呢？让我们来探讨一下这个话题。

在开始之前，我想分享一个小故事。我曾在一个项目中负责优化首页的加载速度，那时页面上有数百张图片，加载速度慢得让人抓狂。通过实施图片懒加载，我们不仅将首页的加载时间缩短了一半，还提升了用户的整体体验。这次经历让我深深体会到懒加载的重要性。

现在，让我们来看看如何用JavaScript实现图片懒加载。

立即学习“Java免费学习笔记（深入）”；

首先，我们需要理解懒加载的基本原理。懒加载的核心思想是只有当图片即将进入用户的视口时才开始加载，这样可以减少初始加载的资源量，提高页面的响应速度。

实现懒加载的关键步骤包括：

• 检测图片是否进入视口
• 替换图片的src属性以触发加载

让我们来看一个简单的实现：

document.addEventListener('DOMContentLoaded', function() {    var lazyImages = [].slice.call(document.querySelectorAll('img[data-src]'));    if ('IntersectionObserver' in window) {        let observer = new IntersectionObserver(function(entries, observer) {            entries.forEach(function(entry) {                if (entry.isIntersecting) {                    let img = entry.target;                    img.src = img.dataset.src;                    img.removeAttribute('data-src');                    observer.unobserve(img);                }            });        });        lazyImages.forEach(function(img) {            observer.observe(img);        });    } else {        // 备用方案：使用scroll事件        var lazyLoad = function() {            lazyImages.forEach(function(img) {                if (img.getBoundingClientRect().top  0 && getComputedStyle(img).display !== 'none') {                    img.src = img.dataset.src;                    img.removeAttribute('data-src');                }            });            if (lazyImages.length == 0) {                document.removeEventListener('scroll', lazyLoad);                window.removeEventListener('resize', lazyLoad);                window.removeEventListener('orientationchange', lazyLoad);            }        };        document.addEventListener('scroll', lazyLoad);        window.addEventListener('resize', lazyLoad);        window.addEventListener('orientationchange', lazyLoad);    }});

登录后复制