图片懒加载的实现首先通过将img标签的src替换为data-src来延迟加载，1. 使用intersectionobserver监听图片是否进入可视区域，进入则加载；2. 兼容性不足时可引入polyfill；3. 可通过getboundingclientrect或计算偏移量判断，但性能较差；4. 推荐intersectionobserver因其性能高、异步且代码简洁；5. 优化体验可结合预加载、占位图、图片压缩、cdn加速和响应式图片，从而显著提升页面加载速度与用户体验。
图片懒加载，简单来说，就是先不加载页面上的所有图片，而是只加载可视区域内的图片，当图片滚动到可视区域时，再动态加载。这样做可以显著提升页面加载速度，尤其是在图片较多的页面上。
实现图片懒加载，主要思路是：监听滚动事件，判断图片是否进入可视区域，如果进入，则加载图片。
解决方案
HTML结构：
首先，在HTML中，将
@@##@@
标签的
src
属性替换为
data-src
，并将
src
属性留空。
data-src
属性用于存储图片的真实地址。
@@##@@@@##@@@@##@@
JavaScript代码：
function lazyLoad() { 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'); // 移除data-src，避免重复加载 observer.unobserve(img); // 停止观察已加载的图片 } }); }); images.forEach(image => { observer.observe(image); });}document.addEventListener('DOMContentLoaded', lazyLoad); // 页面加载完成后执行
这段代码使用了
IntersectionObserver
API，这是一个现代浏览器提供的用于监听元素是否进入可视区域的API。
IntersectionObserver
创建一个观察者，它会监听指定元素（这里是所有的
img[data-src]
）是否进入可视区域。
entries
是一个数组，包含了所有被观察的元素的状态信息。
entry.isIntersecting
表示元素是否进入了可视区域。如果元素进入了可视区域，就将
data-src
的值赋给
src
，从而加载图片。加载完成后，移除
data-src
属性，避免重复加载，并且停止观察该图片。
observer.observe(image)
开始观察指定的图片元素。
兼容性处理：
IntersectionObserver
API在一些老版本的浏览器中可能不支持。可以使用polyfill来解决兼容性问题。 可以引入
polyfill.io
提供的polyfill，或者使用
lazysizes
库，它已经包含了polyfill。
如何判断图片是否进入可视区域？
除了
IntersectionObserver
，还有其他方法可以判断图片是否进入可视区域，例如：
getBoundingClientRect()： 获取元素相对于视口的位置信息。
function isInViewport(element) { const rect = element.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right { if (isInViewport(img)) { img.src = img.dataset.src; img.removeAttribute('data-src'); } });}document.addEventListener('scroll', lazyLoad);document.addEventListener('DOMContentLoaded', lazyLoad);
这种方法需要监听
scroll
事件，并在滚动时不断判断图片是否进入可视区域，性能上不如
IntersectionObserver
。
计算offsetTop和scrollTop： 这种方法需要手动计算元素距离文档顶部的距离，以及滚动条滚动的距离，比较繁琐，不推荐使用。
为什么推荐使用IntersectionObserver？
IntersectionObserver
API的优势在于：
性能优化：
IntersectionObserver
是由浏览器原生提供的，使用了浏览器的优化机制，性能更高。 它不会频繁触发回调函数，只有在元素进入或离开可视区域时才会触发。异步处理：
IntersectionObserver
是异步执行的，不会阻塞主线程，避免页面卡顿。代码简洁： 使用
IntersectionObserver
可以简化代码，提高可读性。
如何优化图片懒加载的体验？
预加载： 可以在图片进入可视区域之前，提前加载一部分图片，避免用户滚动到图片时出现短暂的空白。 可以使用
IntersectionObserver
的
rootMargin
选项来实现预加载。
const observer = new IntersectionObserver((entries, observer) => { // ...}, { rootMargin: '200px 0px' // 提前200px加载});
占位图： 在图片加载完成之前，可以使用占位图来填充图片区域，避免页面布局抖动。 可以使用纯色背景、模糊图片或SVG占位图。
图片优化： 对图片进行压缩，减小图片体积，可以加快图片加载速度。 可以使用工具如
TinyPNG
或
ImageOptim
。
CDN加速： 使用CDN加速可以提高图片的访问速度，尤其是在用户分布在不同地区的情况下。
响应式图片： 根据不同的屏幕尺寸，加载不同大小的图片，可以节省流量，提高加载速度。 可以使用
元素或
srcset
属性来实现响应式图片。 例如:
@@##@@
总的来说，图片懒加载是一个重要的性能优化手段。 使用
IntersectionObserver
API可以方便地实现图片懒加载，并获得更好的性能。 结合预加载、占位图、图片优化和CDN加速等手段，可以进一步提升用户体验。
以上就是js如何实现图片懒加载的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1515498.html
微信扫一扫 
支付宝扫一扫 
