图片懒加载的核心是延迟加载非首屏图片，等其进入可视区域时才加载，提升页面性能。具体实现方式包括：1.基于offsettop和window.innerheight进行简单判断；2.使用getboundingclientrect优化可见性检测；3.利用intersection observer api异步监听元素可见性，性能更优；4.结合requestanimationframe优化滚动事件处理，避免页面卡顿。seo优化可通过
标签、服务器端渲染或使用loading=”lazy”属性实现。图片加载前应预留空间，防止布局抖动，可通过固定宽高、css aspect-ratio属性或低分辨率占位图实现。选择实现方式需综合考虑项目需求、兼容性及性能优化目标。
图片懒加载，简单来说，就是让页面上的图片不是一次性全部加载，而是等到它们进入用户的可视区域时才加载。这样做可以显著提升页面加载速度，特别是当页面包含大量图片时。
解决方案
实现图片懒加载的核心在于监听图片的滚动事件，判断图片是否进入可视区域。 一旦图片进入可视区域，就将图片的src属性设置为真实的图片地址，从而触发图片的加载。
以下提供四种实现懒加载的技巧：
基于offsetTop和window.innerHeight的简单实现
这种方法是最基础的，通过比较图片距离页面顶部的距离(offsetTop)和窗口的内部高度(window.innerHeight)以及滚动条滚动的距离来判断图片是否可见。
function lazyLoad() { const images = document.querySelectorAll('img[data-src]'); images.forEach(img => { if (img.offsetTop < window.innerHeight + window.scrollY) { img.src = img.dataset.src; img.removeAttribute('data-src'); // 防止重复加载 } });}// 监听滚动事件window.addEventListener('scroll', lazyLoad);// 页面加载完成时执行一次document.addEventListener('DOMContentLoaded', lazyLoad);
这个方法虽然简单，但效率相对较低，每次滚动都会遍历所有图片。
使用getBoundingClientRect优化判断
getBoundingClientRect方法可以获取元素相对于视口的位置信息，避免了计算offsetTop和scrollY的麻烦，也更准确。
function lazyLoad() { const images = document.querySelectorAll('img[data-src]'); images.forEach(img => { const rect = img.getBoundingClientRect(); if (rect.top = 0 && rect.left = 0) { img.src = img.dataset.src; img.removeAttribute('data-src'); } });}window.addEventListener('scroll', lazyLoad);document.addEventListener('DOMContentLoaded', lazyLoad);
这种方法相对更高效，因为getBoundingClientRect是浏览器原生方法，性能较好。
利用Intersection Observer API实现
Intersection Observer API是专门为监听元素可见性而设计的，性能更高，也更简洁。
const images = document.querySelectorAll('img[data-src]');const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; img.removeAttribute('data-src'); observer.unobserve(img); // 停止监听已加载的图片 } });});images.forEach(img => { observer.observe(img);});
Intersection Observer API的优势在于它是异步的，不会阻塞主线程，而且可以设置阈值，控制图片在进入可视区域多少比例时才加载。
结合requestAnimationFrame优化滚动事件处理
频繁的滚动事件处理可能会导致页面卡顿。 使用requestAnimationFrame可以将滚动事件处理函数推迟到下一次浏览器重绘之前执行，从而提高性能。
let ticking = false;function lazyLoad() { if (!ticking) { requestAnimationFrame(function() { // 上面的懒加载逻辑 ticking = false; }); ticking = true; }}window.addEventListener('scroll', lazyLoad);document.addEventListener('DOMContentLoaded', lazyLoad);
requestAnimationFrame可以确保动画流畅，避免掉帧。
图片懒加载如何处理SEO优化？
懒加载虽然提升了用户体验，但也可能影响SEO。搜索引擎爬虫可能无法执行JavaScript，导致无法加载所有图片。解决办法：
使用标签提供备用图片： 在标签，当JavaScript不可用时，显示备用图片。
@@##@@@@##@@
使用服务器端渲染（SSR）： 在服务器端渲染页面，确保搜索引擎爬虫可以获取完整的HTML内容，包括所有图片。
使用Google推荐的懒加载方式： Google推荐使用loading="lazy"属性，这是一个浏览器原生的懒加载属性，搜索引擎可以识别。
@@##@@
如何处理懒加载图片的占位问题？
在图片加载完成之前，需要为图片预留空间，避免页面布局发生跳动。常见的做法：
使用固定宽高： 为
使用CSS aspect-ratio属性： 设置图片的宽高比，让浏览器自动计算高度。
img { aspect-ratio: 16 / 9; /* 设置宽高比 */ object-fit: cover; /* 图片填充方式 */}
使用占位符图片： 使用低分辨率的占位符图片，在图片加载完成后替换为高清图片。
如何选择合适的懒加载实现方式？
选择哪种懒加载实现方式取决于项目的具体需求和兼容性要求。
简单项目或需要兼容旧版本浏览器： 可以选择基于offsetTop或getBoundingClientRect的实现方式。现代项目且对性能要求较高： 推荐使用Intersection Observer API。需要更精细的控制和优化： 可以结合requestAnimationFrame来处理滚动事件。如果主要目标是提升Lighthouse得分，且没有兼容性问题： 直接使用loading="lazy"属性。
总之，选择合适的懒加载实现方式需要综合考虑性能、兼容性和SEO等因素。
以上就是js如何实现图片懒加载 提升性能的4种懒加载实现技巧！的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1508103.html
微信扫一扫 
支付宝扫一扫 
