优先推荐使用Intersection Observer API实现图片懒加载，通过监听元素是否进入视口异步加载图片，性能好且代码简洁；对于旧浏览器可降级采用scroll事件配合getBoundingClientRect或offsetTop判断位置，并结合节流或防抖优化性能。
图片懒加载是一种优化网页性能的常用技术，能有效减少首屏加载时间、降低服务器压力。它通过延迟加载非首屏图片，只有当用户滚动到可视区域时才加载对应图片。以下是 JavaScript 实现图片懒加载的三种常见方式。
1. 使用 getBoundingClientRect 判断元素是否进入视口
这种方式通过定时检测图片元素与浏览器视口的位置关系，判断是否需要加载。
实现思路：
给所有需要懒加载的图片设置 data-src 属性，存放真实图片地址。 初始时 img 的 src 指向占位图或为空。 监听 scroll 事件，遍历所有未加载的图片，调用 getBoundingClientRect() 获取其位置。 如果图片的 top 值小于可视区域高度（且处于向下滚动），则将 data-src 赋值给 src，完成加载。
示例代码：
立即学习“Java免费学习笔记（深入）”；
const images = document.querySelectorAll('img[data-src]');function checkVisible() { const windowHeight = window.innerHeight; images.forEach(img => { const rect = img.getBoundingClientRect(); if (rect.top < windowHeight && !img.src) { img.src = img.dataset.src; } });}window.addEventListener('scroll', checkVisible);checkVisible(); // 初始化检查一次
注意：scroll 事件频繁触发，建议结合防抖（debounce）优化性能。
2. 使用 Intersection Observer API（推荐）
这是现代浏览器推荐的方式，无需手动计算位置，性能更好，代码更简洁。
实现原理：
创建一个 IntersectionObserver 实例，监听目标元素是否进入视口。 当元素可见时，回调函数触发，加载真实图片。 加载完成后可停止监听该元素。
示例代码：
立即学习“Java免费学习笔记（深入）”；
const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; observer.unobserve(img); // 加载后停止监听 } });});document.querySelectorAll('img[data-src]').forEach(img => { observer.observe(img);});
Intersection Observer 是异步执行，不会阻塞页面渲染，适合大量图片场景。
3. 使用 scroll + offsetTop 配合节流
通过元素距离文档顶部的偏移量（offsetTop）与页面滚动位置比较，判断是否进入视口。
实现步骤：
记录每张图片的 offsetTop 值（可缓存避免重复计算）。 监听页面 scroll 事件，获取当前滚动距离（window.pageYOffset）。 结合可视区域高度，判断图片是否进入视野。 使用节流函数控制检测频率，防止频繁执行。
示例代码（含节流）：
function throttle(fn, delay) { let flag = true; return function () { if (!flag) return; flag = false; setTimeout(() => { fn.apply(this, arguments); flag = true; }, delay); };}const imgs = document.querySelectorAll('img[data-src]');let imageIndex = 0;function lazyLoad() { const scrollTop = window.pageYOffset; const clientHeight = window.innerHeight; for (let i = imageIndex; i < imgs.length; i++) { if (imgs[i].offsetTop < scrollTop + clientHeight) { imgs[i].src = imgs[i].dataset.src; imageIndex++; } }}window.addEventListener('scroll', throttle(lazyLoad, 100));
这种方式兼容性好，适合不支持 Intersection Observer 的旧浏览器。
基本上就这些。优先推荐使用 Intersection Observer，兼顾性能和可维护性。在需要兼容老版本浏览器时，可降级使用 scroll + getBoundingClientRect 或 offsetTop 方案，并配合节流优化。图片懒加载虽小，但对用户体验提升明显。
以上就是JavaScript实现图片懒加载的三种方式_javascript优化的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1536205.html
微信扫一扫 
支付宝扫一扫 
